可以用斜切+旋轉

扇形

.pie {

position: relative;

margin: 1em auto;

padding: 0;

width: 32em;

height: 32em;

border-radius: 50%;

list-style: none;

overflow: hidden;

}

.slice {

overflow: hidden;

position: absolute;

top: 0;

right: 0;

width: 50%;

height: 50%;

transform-origin: 0% 100%;

color:#fff;

}

.slice-one {

transform: rotate(30deg) skewY(-30deg);

background: black;

}

.slice-two {

transform: rotate(-30deg) skewY(-30deg);

background: yellow;

}

.slice-three {

transform: rotate(-90deg) skewY(-30deg);

background: black;

}

.slice-four {

transform: rotate(-150deg) skewY(-30deg);

background: yellow;

}

.slice-five {

transform: rotate(-210deg) skewY(-30deg);

background: black;

}

.slice-six {

transform: rotate(-270deg) skewY(-30deg);

background: yellow;

}

總結

以上是生活随笔為你收集整理的html文字如何排布成圆形,css多个扇形怎么拼凑成圆?的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。