如何使用CSS 3 border-radius创建复杂形状？

Question

我正在使用css3制作这个形状。但我找不到一个优雅的解决方案来实现它。我尝试了一些来自css3shapes的样本，但这些样本非常简单。我如何绘制如此复杂的形状。

Answer 1

使用一个元素border-radius

是不可能的

边框半径只接受8个这样的参数

    border-top-left-radius: 1px 2px;
   border-top-right-radius: 3px 4px;
 border-bottom-left-radius: 5px 6px;
border-bottom-right-radius: 7px 8px;

你不能再做那些了。

另外，元素/框只有4个角，该形状必须至少有10个角。

可能是一个坏主意，但如果你不想作为背景，你可以使用border-image。

或使用SVG

Answer 2

尝试使用border-radius-shape语法。在不久的将来来找你。 先试试吧。 http://leaverou.github.io/border-corner-shape/