凹边可能是半径吗？

Question

这是一个简单的凸示例。

http://jsfiddle.net/swY5k/

#test{
    width: 200px;
    height: 200px;
    background: #888888;
    border-radius: 50px;
}

但是，我想要一个凹边的半径。

我尝试使border-radius为负，但这不起作用。

凹/凸的例子：

Answer 1

通过巧妙地使用:before和:after伪类，我们可以模拟凹形：

#test{
    width: 100px;
    height: 300px;
    background: green;
    position: relative;
    display: inline-block;
}

#test:before{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 0 60px 60px 0 / 0 300px 300px 0;
    display: inline-block;
    content: '';
}

#test:after{
    background: white;
    height: 300px;
    width: 30px;
    border-radius: 60px 0 0 60px / 300px 0 0  300px;
    display: inline-block;
    content: '';
    position: relative;
    left: 40px;
}

#test div是一个普通的矩形。但它的:before和:after元素是半边凹面填充背景颜色（在这种情况下为白色）。

请参阅this jsfiddle。

Answer 2

您可以使用背景上的径向渐变来给出凹边的印象。例如，像这样：

#test {
    width: 200px;
    height: 200px;
    background: #888888;
    background:
      radial-gradient(circle 20px at -20% 50%,transparent,transparent 100px,#888888 100px),
      radial-gradient(circle 20px at 120% 50%,transparent,transparent 100px,#888888 100px);
    background-size:100px 200px, 100px 200px;
    background-position:0 0,100% 0;
    background-repeat:no-repeat;
}

请注意，大多数webkit浏览器仍需要径向渐变的前缀，如果您想完全支持旧版浏览器，则可能还需要实现较旧的渐变语法。

Answer 3

要生成形状，可以使用伪元素

div {
  height: 250px;
  width: 100px;
  background: tomato;
  position: relative;
  margin:0 auto;
}
div:before {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  left: -25%;
  transition: all 0.8s;
}
div:after {
  content: "";
  height: 100%;
  width: 50%;
  position: absolute;
  background: white;
  border-radius: 50%;
  right: -25%;
  transition: all 0.8s;
}
div:hover:before,
div:hover:after {
  background: blue;
}

hover the shape to see how it works:
<div></div>

Answer 4

我建议使用border-image，在边框中使用可缩放的SVG图像。

这样你就可以在边框中找到任何你想要的形状;不需要限制border-radius提供的形状，也不需要做任何聪明的黑客或额外的标记。

缺点是旧浏览器（即旧的IE版本）不支持border-image和SVG。但当然，border-radius也不是，所以与你获得的灵活性相比，这种技术你不会失去太多。

Answer 5

SVG是创建此类形状的推荐方法。它提供简单性和可扩展性。

我们可以使用SVG的路径元素来创建上面的形状，并用一些纯色，渐变或图案填充它。

只有一个属性d用于定义path元素中的形状。该属性本身包含许多短命令和很少的参数，这些命令是这些命令工作所必需的。

以下代码将创建凸形：

<path d="M 150,25
         Q 115,100 150,175
         Q 185,100 150,25" />

接下来将创建一个凹形：

<path d="M 30,25
         L 80,25
         Q 50,100 80,175
         L 30,175
         Q 60,100 30,25" />

以下是上述代码中使用的path命令的简要说明：

• M命令用于定义起点。它出现在开头，并指定绘图应该从哪里开始。
• L命令用于绘制直线。
• Q命令用于绘制曲线。

输出图片：

工作演示：

<svg width="300" height="200" viewBox="0 0 300 200">
  <defs>
    <linearGradient id="grad">
      <stop offset="0" stop-color="#ddd" />
      <stop offset=".5" stop-color="#fff" />
      <stop offset="1" stop-color="#ddd" />
    </linearGradient>
  </defs>
  <g stroke-width="1" stroke="#000" fill="url(#grad)">
    <path d="M30,25 L80,25 Q50,100 80,175 L30,175 Q60,100 30,25" />
    <path d="M150,25 Q115,100 150,175 Q185,100 150,25" />
  </g>
</svg>

有用的资源：

以下是SVG的一些有用链接：

• Specification
• MDN

Answer 6

有几种制作凹形边框的方法。而且我更喜欢在背景上使用径向渐变。 https://jsfiddle.net/black_horse/qygmb8z9/

Sample Picture

.single-border{
  height: 50px;
  padding: 20px;
  background:-moz-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -moz-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-o-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -o-radial-gradient(100% 0, circle, rgba(204,0,0,0) 14px, #c00 21px), -o-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background:-webkit-radial-gradient(0 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 100%, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(100% 0, circle, rgba(204,0,0,0) 20px, #c00 21px), -webkit-radial-gradient(0 0, circle, rgba(204,0,0,0) 20px, #c00 21px);
    background-position:left bottom, right bottom, right top, left top;
    -moz-background-size:51% 51%;
    -webkit-background-size:51% 51%;
    background-size:51% 51%;
    background-repeat:no-repeat;
}


<div class="single-border">
  Single border
</div>