修改CSS以生成6个圆扇区

Question

我在这里找到了一些代码：https://stackoverflow.com/a/29007874/3042018，它使用旋转和倾斜的CSS (例如transform: rotate(30deg) skewY(-60deg); )生成12个圆圈扇区。

我想修改代码，使其有6个扇区，而不是12个扇区。我认为应该很简单。我已尽了应有的努力，做得很好，但我很为难。我删除了最后六个列表元素以及这些元素的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(60deg) rotate(15deg);
    -ms-transform: skewY(60deg) rotate(15deg);
    transform: skewY(60deg) rotate(15deg);
    padding-top: 20px;
}

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

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;  
}

<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>

​

Answer 1

我只是听从了邮局的指示。

​

.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(15deg);
    -ms-transform: skewY(30deg) rotate(15deg);
    transform: skewY(30deg) rotate(15deg);
    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;  
}

<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>

​

Answer 2

skewY在li元件上控制楔形角。skewY(-30deg)使它适合六个楔形的尺寸。

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

transform和padding-top在.text上对抗容器的倾斜并控制文本的方向和位置。因此，将其调整如下：

.text {
  transform: skewY(30deg) rotate(30deg);
  padding-top: 15px;
}

当然，您还需要更新-webkit-transform和-ms-transform。