负边框(css) [英] Negative borders (css)

问题描述

我知道如何用css制作一个看起来像这样的边框:

I know how to make a border with css that looks like this:

    ___________
  _/           \_
 /               \
|                 |
|                 |

但是有可能制作一个看起来像这样的边框:

But is there a possibility to make a border that looks like that:

|\_             _/|
|  \___________/  |
|                 |
|                 |

提前谢谢！

推荐答案

使用带有框阴影的伪元素的解决方案:

A solution using a pseudo element with a box-shadow:

div {
    background: orange;
    width: 400px;
    height: 40px;
    margin-top: 100px;
    z-index: 1;
    position: relative;
}

div:after {
    content: "";
    position: absolute;
    height: 100px;
    left: 0px;
    right: 0px;
    bottom: 100%;
    background-color: transparent;
    border-bottom-left-radius: 50% 70px;
    border-bottom-right-radius: 50% 70px;
    box-shadow: 0px 0px 0px 100px orange;
    clip: rect(0px, 400px, 100px, 0px);
}

这篇关于负边框(css)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！