CSS 多边形/形状：间距圆

【问题标题】：CSS Polygon/Shape: Pitch CircleCSS 多边形/形状：间距圆
【发布时间】：2014-07-21 23:31:42
【问题描述】：

是否可以在 CSS 中得到这样的形状：

我想分别设置背景颜色和边框颜色。

【问题讨论】：

你想要 SVG：developer.mozilla.org/en-US/docs/Web/SVG
我认为通过CSS可以做到这一点，这对边框来说很方便。我会尽快搞定。
这是我得到的最接近的：jsfiddle.net/nVf7F - 使用 Lea Verou 的 this approach。除非您使用多个元素，否则您无法真正使用单个元素和 CSS 来做到这一点，仅仅是因为应用这些边框只能通过渐变和类似的东西来完成，但是使用这种技术（这是我唯一知道的）你'将从背景渐变中获得重叠，从而破坏形状。我认为您需要使用 SVG 大声笑 xD

标签： html css polygon

【解决方案1】：

是的，这是可能的，至少你可以非常接近它：

如何使用 div 的边框制作实际形状：

div{
border-left:150px solid transparent; 
    border-right:150px solid transparent;
    border-top:300px solid lavender;
    border-radius:50%;
    position:relative;
    width:200px;

}

由于是使用边框来创建形状，所以必须使用 div:after 来创建边框的边框！

div:before{
border-left:150px solid transparent; 
    border-right:150px solid transparent;
    border-top:320px solid red;
    border-radius:50%;
    position:absolute;
    top:-310px;
    left:-160px;
    content:'';
    z-index:-1;
    width:220px;
}

DEMO

要给它添加文字，你必须给文字绝对定位：

div p{
    position:absolute;
    top:-200px;
    left:50px;

}

DEMO

【讨论】：