负边界（css）

Question

我知道如何使用看起来像这样的css边框：

    ___________
  _/           \_
 /               \
|                 |
|                 |

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

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

提前致谢！

Answer 1

oki :)，所以从我的评论，例子和你的小提琴，这是你要找的？ 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嵌套。

Answer 2

使用带有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