如何使用CSS 3边界半径来创建复杂的形状？

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/