负边框（CSS）

Question

我知道如何使用CSS创建边框，看起来像这样：

    ___________
  _/           \_
 /               \
|                 |
|                 |

但是，有没有可能制作一个看起来像这样的边框呢？

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

感谢您的提前帮助！

- Felix Edelmann

---

不要使用其他重叠元素（或伪元素）或图像来实现。 - Madara's Ghost

你可以尝试调整CSS的box-shadow属性，使用inset来实现。 - Laurent

重叠元素不起作用，因为我的背景是径向渐变，所以我不能使用这个：http://jsfiddle.net/MU6H8/1/。 - Felix Edelmann

我有一些使用伪元素来切割边缘的示例：http://codepen.io/collection/KIkgz/，其中大部分使用box-shadow来允许查看主背景，你也可以在这个集合中找到：http://codepen.io/collection/LbCzx/。我猜你可以通过搜索找到很多其他的例子。 - G-Cyrillus

Answer 1

使用伪元素和 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);
}

fiddle

- vals

Answer 2

好的:), 从我的评论、例子和你的fiddle来看，这就是你要找的东西吗？ http://jsfiddle.net/MU6H8/3/

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

请注意，当伪元素和内边距完成工作时，您实际上不需要使用2个嵌套的div。

- G-Cyrillus

---

代码可行，但我接受了其他答案，因为它的代码更短。无论如何，谢谢！ - Felix Edelmann

@Felix 没问题，重要的是你添加一个适合你需求的答案 :) - G-Cyrillus