html - CSS 多边形/形状 : 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;

}

既然是使用border来创建形状，那么必须使用div:after来创建border的border!

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