如何修改CSS代码生成6个无间隙的完整圆形扇区？

原代码通过rotate和skew属性生成12个圆形扇区，改为6个扇区时出现间隙，核心原因是角度参数未匹配新的扇区尺寸调整。以下是修正后的完整代码及关键调整说明：

关键调整点 #

• 列表项（li）的skewY角度：从-60deg改为-30deg，匹配60°的扇区中心角
• 文本容器（.text）的transform：将skewY(60deg) rotate(15deg)改为skewY(30deg) rotate(30deg)，抵消列表项的倾斜并让文字居中显示

修正后的完整代码 #

CSS 代码 #

.circle {
    position: relative;
    border: 1px solid black;
    padding: 0;
    margin: 1em auto;
    width: 20em;
    height: 20em;
    border-radius: 50%;
    list-style: none;
    overflow: hidden;
}
li {
    overflow: hidden;
    position: absolute;
    top: 0; right: 0;
    width: 50%; height: 50%;
    transform-origin: 0% 100%;      
}
.text {
    position: absolute;
    left: -100%;
    width: 200%; height: 200%;
    text-align: center;
    -webkit-transform: skewY(30deg) rotate(30deg);
    -ms-transform: skewY(30deg) rotate(30deg);
    transform: skewY(30deg) rotate(30deg);
    padding-top: 20px;
}

li:first-child {
    -webkit-transform: rotate(0deg) skewY(-30deg);
    -ms-transform: rotate(0deg) skewY(-30deg);
    transform: rotate(0deg) skewY(-30deg);     
}
li:nth-child(2) {
    -webkit-transform: rotate(60deg) skewY(-30deg);
    -ms-transform: rotate(60deg) skewY(-30deg);
    transform: rotate(60deg) skewY(-30deg);     
}
li:nth-child(3) {
    -webkit-transform: rotate(120deg) skewY(-30deg);
    -ms-transform: rotate(120deg) skewY(-30deg);
    transform: rotate(120deg) skewY(-30deg);    
}
li:nth-child(4) {
    -webkit-transform: rotate(180deg) skewY(-30deg);
    -ms-transform: rotate(180deg) skewY(-30deg);
    transform: rotate(180deg) skewY(-30deg);    
}
li:nth-child(5) {
    -webkit-transform: rotate(240deg) skewY(-30deg);
    -ms-transform: rotate(240deg) skewY(-30deg);
    transform: rotate(240deg) skewY(-30deg);    
}
li:nth-child(6) {
    -webkit-transform: rotate(300deg) skewY(-30deg);
    -ms-transform: rotate(300deg) skewY(-30deg);
    transform: rotate(300deg) skewY(-30deg);    
}

li:first-child .text {
    background: green; 
}
li:nth-child(2) .text {
    background: tomato; 
}
li:nth-child(3) .text {
    background: aqua; 
}
li:nth-child(4) .text {
    background: yellow;  
}
li:nth-child(5) .text {
    background: orange;  
}
li:nth-child(6) .text {
    background: purple;  
}

HTML 代码 #

<ul class="circle">
    <li>
        <div class="text">1</div>
    </li>
    <li>
        <div class="text">2</div>
    </li>
    <li>
        <div class="text">3</div>
    </li>
    <li>
        <div class="text">4</div>
    </li>
    <li>
        <div class="text">5</div>
    </li>
    <li>
        <div class="text">6</div>
    </li>
</ul>

原理说明 #

6个扇区的中心角为60°（360°÷6）：

• 列表项的skewY(-30deg)用于切割出60°的扇形区域，transform-origin: 0% 100%确保旋转和倾斜围绕圆形左下角（扇区的圆心角顶点）进行
• 文本容器的skewY(30deg)抵消列表项的倾斜，让文字保持水平；rotate(30deg)则让文字正对扇区的中心方向，保证显示居中

内容的提问来源于stack exchange，提问作者Robin Andrews