jquery - 如何创建负凹形

我想创建一个具有如下特殊图像背景的div标记
concave http://cubeupload.com/im/nZDFtO.png
我正在使用以下代码创建凹面形状：

    .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；

最佳答案

您可以使用伪元素和大方框阴影来实现这种形状：

div {
  position: relative;
  height: 200px;
  overflow: hidden;
}
div:before {
  content: "";
  position: absolute;
  top: -25%;
  left: -10%;
  height: 50%;
  width: 120%;
  border-radius: 50%;
  box-shadow: 0 0 0 500px green;
}
html,
body {
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
  height: 100%;
}

<div></div>

但是，如果您使用的是纯色背景，则可以使用以下内容：

div {
  position: relative;
  height: 200px;
  overflow: hidden;
  background: radial-gradient(ellipse at center, rgba(79, 79, 79, 1) 0%, rgba(34, 34, 34, 1) 100%);
}
div:before {
  content: "";
  position: absolute;
  top: -25%;
  left: -10%;
  height: 50%;
  width: 120%;
  border-radius: 50%;
  background:white;
}
html,
body {

  height: 100%;
}

<div></div>