Html 负边框（css）

我知道如何使用css创建一个如下所示的边框：

    ___________
  _/           \_
 /               \
|                 |
|                 |

但是有没有可能建立一个这样的边界：

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

---

提前谢谢

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

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);
}

oki:），那么从我的评论、例子和你的小提琴来看，这就是你想要的吗？

---

请注意，当伪元素和填充完成此工作时，您实际上不需要使用2 div嵌套。

没有其他重叠元素（或伪元素）或使用图像时，您可以尝试摆弄CSS框阴影

插入

。重叠元素不起作用，因为我的背景是径向渐变，所以我不能使用这个：我有几个例子使用伪元素来切割边缘：，大多数都使用框阴影来查看后面的主要背景，你也有这个集合，我想你可能会通过searchingWorks找到很多其他的例子，但我接受了另一个答案，因为这是一个较短的代码。无论如何谢谢你@Felix没问题，重要的是您添加了一个适合您需要的答案：）

body {
    text-align: center;
}
body > div {
    width: 400px;
    margin : 1em auto;
    padding-top:40px;
    position:relative;
    overflow:hidden;
}
body>div:before {
    content :'';
    position:absolute;
    top:0;
    left:0;
    right:0;
    height:40px;
    border-bottom-left-radius: 200px 40px;
    border-bottom-right-radius: 200px 40px;
    transition:background 0.5s;
    background: orange;
    box-shadow: 0 0 0 2000px purple
}
div div {
    width: 400px;
    height: 100px;
    position:relative;
    background:purple
}
body:hover> div:before {
    background:none;
}
body {
    background:url(http://lorempixel.com/100/100/abstract);
}