修改CSS產生6個圓扇區

Question

我在這里找到了一些代碼： https://stackoverflow.com/a/29007874/3042018 ，它使用旋轉和傾斜 CSS 制作了 12 個圓扇區（例如transform: rotate(30deg) skewY(-60deg); ）。

我想將代碼修改為有 6 個扇區而不是 12 個。我認為它應該很簡單。 我已經盡職調查並獲得了一個很好的 go，但我很困惑。 我刪除了最后六個列表元素和這些元素的 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

li元素上的skewY控制楔形的角度。 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);
}

.text上的transform和padding-top抵消容器的傾斜並控制文本的方向和 position。 所以調整如下：

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

當然，您還需要更新-webkit-transform和-ms-transform 。

Answer 2

我只是按照帖子的說明進行操作。

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