凹边可能是半径吗？

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

的#testDIV是一个普通的矩形.但它:before和:after元素是半边凹面填充背景颜色(在这种情况下为白色).

看到这个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

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

我们可以用 SVG的 path 元素来创建一个像上面一样的形状，并用一些纯色、渐变或图案填充它。

只有一个属性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 命令用于绘制曲线。

输出图像：

工作演示：

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

有用的资源：

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

• 规格
• MDN