CSS Polygon / Shape：Pitch Circle

Question

是否有可能在CSS中获得这样的形状：

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

Answer 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