Question

我想创建一个带有特殊图像背景的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;
    }

但现在我想要一些相反的东西。我使用以下命令，但它没有工作

border-radius：-50％-50％0px 0px;

enter image description here

Answer 1

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

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>

Answer 2

你不能在CSS中那样做。 MDN上有一份很好的文档：https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius

但你可以做的是使用z-index将一个元素放在另一个元素的顶部，顶部元素使用样式，底部元素是图像。

Answer 3

根据您的精确需求，您可以与某些css3非常接近。使用这样的标记：

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

和css是这样的：

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

你得到这样的东西：

enter image description here

Here是一个可以玩的jsFiddle。唯一的问题是，这只适用于IE9 +，遗憾的是仍然遗漏了很多人。

修改：如果您只需要薄条（边框），只需将background: black;替换为border-top: 1px solid black;。

更新了小提琴：Here。

如何制作负凹形状

3 个答案: