如何使用css3 / javascript将圆圈分成12个相等的部分

HTML：

<?xml version="1.0" encoding="utf-8"?>
<html>
  <head>
    <title>Circle</title>
    <link rel="stylesheet" href="stylesheet.css" type="text/css" />
  </head>
  <body>
    <div class="circle"><p class="innerCircle"></p></div>
  </body>
</html>

CSS：

.circle {
    width: 450px;
    height: 450px;

    border-top: 30px solid #416fa6;
    border-right: 30px solid #718242;
    border-bottom: 30px solid #63ae98;
    border-left: 30px solid #b45447;
    -webkit-border-radius: 300px;
       -moz-border-radius: 300px;
            border-radius: 300px;
}
.innerCircle {
    width: 0px;
    height: 0px;
    border-top: 210px solid #416FA6;
    border-left: 210px solid #B45447;
    border-right: 210px solid #718242;
    border-bottom: 210px solid #FFA500;
    -webkit-border-radius: 100%;
       -moz-border-radius: 100%;
            border-radius: 100%;
    margin-left: 15px;
    margin-right:0px;
    margin-top: 15px;
    margin-bottom:0px; 
    /* border-radius: 50%;
    background-color: green; */
}

我想通过使用innerCircle的线将一个圆分成12个部分,如下图所示.我尝试了很少但不完全.所以请提出一些想法.

提前致谢.

解决方法

这可以使用CSS转换完成

1)对于12个相等的切片,每个切片角度将为30度.

2)我们需要根据垂直轴和切片开始之间的角度旋转每个切片.因此第一个切片将旋转0度,最后一个切片旋转330度

3)此外,我们需要将每个切片倾斜减去(90度 – 切片角度)
在这种情况下,它是 – (90deg – 30deg)= skewY(-60deg)

4)关于案文：

a)我们需要用skewY(60deg)去掉切片内容

b)为了使文本在切片中居中,我们需要将切片角度旋转一半,因此：旋转(15度)

FIDDLE

.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;
  transform: skewY(60deg) rotate(15deg);
  padding-top: 20px;
}
li:first-child {
  transform: rotate(0deg) skewY(-60deg);
}
li:nth-child(2) {
  transform: rotate(30deg) skewY(-60deg);
}
li:nth-child(3) {
  transform: rotate(60deg) skewY(-60deg);
}
li:nth-child(4) {
  transform: rotate(90deg) skewY(-60deg);
}
li:nth-child(5) {
  transform: rotate(120deg) skewY(-60deg);
}
li:nth-child(6) {
  transform: rotate(150deg) skewY(-60deg);
}
li:nth-child(7) {
  transform: rotate(180deg) skewY(-60deg);
}
li:nth-child(8) {
  transform: rotate(210deg) skewY(-60deg);
}
li:nth-child(9) {
  transform: rotate(240deg) skewY(-60deg);
}
li:nth-child(10) {
  transform: rotate(270deg) skewY(-60deg);
}
li:nth-child(11) {
  transform: rotate(300deg) skewY(-60deg);
}
li:nth-child(12) {
  transform: rotate(330deg) 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;
}
li:nth-child(7) .text {
  background: cyan;
}
li:nth-child(8) .text {
  background: brown;
}
li:nth-child(9) .text {
  background: gray;
}
li:nth-child(10) .text {
  background: pink;
}
li:nth-child(11) .text {
  background: maroon;
}
li:nth-child(12) .text {
  background: gold;
}

<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>
  <li>
    <div class="text">7</div>
  </li>
  <li>
    <div class="text">8</div>
  </li>
  <li>
    <div class="text">9</div>
  </li>
  <li>
    <div class="text">10</div>
  </li>
  <li>
    <div class="text">11</div>
  </li>
  <li>
    <div class="text">12</div>
  </li>

  <ul>

注意：
IE9和Safari / iOS分别需要-ms和-webkit供应商前缀. (caniuse)

如何使用css3 / javascript将圆圈分成12个相等的部分

解决方法

相关文章