Jquery 如何创建负凹面形状

我想创建一个具有特殊图像背景的div标记，如下所示

我正在使用以下代码创建凹面形状：

    .slide2:before
    {

background:black;
    background-size:cover;
    height: 50px;
    z-index:0;
    width: 100%;
      border-radius:50% 50% 0px 0px;
    display: block;
    content: '';
    position: absolute;

    left: 0;
    }

但现在我想要相反的东西。我正在使用以下命令，但它不起作用

边界半径：-50%-50%0px 0px

---

在CSS中不能这样做。MDN上有一个很好的文档：

---

但是，您可以使用z索引将一个元素放置在另一个元素的顶部，顶部元素使用样式，底部元素是图像。

根据您的EXACT需要，您可以使用一些css3。使用如下标记：

<div class="concave">
</div>
<div class="concave flip-vertical">
</div>
<div class="concave rotate-vertical">
</div>

    .concave
    {
        background: black;
        background-size: cover;
        height: 50px;
        z-index: 0;
        width: 100%;
        border-radius: 50% 50% 0px 0px;
        display: block;
        content: '';
        width: 200px;
    }

    .flip-vertical
    {
        -moz-transform: scale(1, -1);
        -webkit-transform: scale(1,-1);
        -o-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
    }

    .rotate-vertical
    {
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

你会得到这样的结果：

<div class="concave">
</div>
<div class="concave flip-vertical">
</div>
<div class="concave rotate-vertical">
</div>

    .concave
    {
        background: black;
        background-size: cover;
        height: 50px;
        z-index: 0;
        width: 100%;
        border-radius: 50% 50% 0px 0px;
        display: block;
        content: '';
        width: 200px;
    }

    .flip-vertical
    {
        -moz-transform: scale(1, -1);
        -webkit-transform: scale(1,-1);
        -o-transform: scale(1, -1);
        -ms-transform: scale(1, -1);
        transform: scale(1, -1);
    }

    .rotate-vertical
    {
        -moz-transform: rotate(-180deg);
        -webkit-transform: rotate(-180deg);
        transform: rotate(-180deg);
    }

是一个可以玩的JSFIDLE。唯一的问题是，这只在IE9+中起作用，不幸的是，它仍然将很多人排除在外

编辑：如果你只想要一条细条（边框），只需替换

background:black带
边框顶部：1px纯黑

更新的fiddle:。
您可以使用伪元素和大框阴影实现这种形状：


div{
位置：相对位置；
高度：200px；
溢出：隐藏；
}
部门：以前{
内容：“；
位置：绝对位置；
前-25%；
左-10%；
身高：50%；
宽度：120%；
边界半径：50%；
框阴影：0 500px绿色；
}
html，
身体{
背景：径向梯度（中心椭圆，rgba（79,79,79,1）0%，rgba（34,34,34,1）100%）；
身高：100%；
}