CSS 使用 CSS3 在圆中分段

Segments in a circle using CSS3

提问by Games Brainiac

I know you can make a circle in CSS3 using the border radius hack. But is there any way to make them have segments like this picture? Is there a way of doing this through HTML and CSS but not JS?

我知道您可以使用边框半径 hack 在 CSS3 中制作一个圆圈。但是有没有什么办法可以让它们有像这张图这样的片段呢？有没有办法通过 HTML 和 CSS 而不是 JS 来做到这一点？

回答by Ana

Yes, you can get such slices of custom angles using either one of the following two methods:

是的，您可以使用以下两种方法之一来获取此类自定义角度切片：

1. If you don't need the slices to be elements themselves, the you can simply do it with one element and linear gradients - see this rainbow wheelI did last month.
2. If you need the slices to be elements themselves, then you can do it by chaining rotate and skew transforms - see this circular menuI did a while ago.

1. 如果你不需要切片本身就是元素，你可以简单地用一个元素和线性渐变来做 - 看看我上个月做的这个彩虹轮。
2. 如果您需要切片本身就是元素，那么您可以通过链接旋转和倾斜变换来实现 - 请参阅我不久前做的这个圆形菜单。

For #2, see also this very much simplified exampleI did right now.

对于#2，另请参阅我现在所做的这个非常简化的示例。

.pie {
  position: relative;
  margin: 1em auto;
  border: dashed 1px;
  padding: 0;
  width: 32em; height: 32em;
  border-radius: 50%;
  list-style: none;
}
.slice {
  overflow: hidden;
  position: absolute;
  top: 0; right: 0;
  width: 50%; height: 50%;
  transform-origin: 0% 100%; 
}
.slice:first-child {
  transform: rotate(15deg) skewY(-22.5deg);
}
.slice-contents {
  position: absolute;
  left: -100%;
  width: 200%; height: 200%;
  border-radius: 50%;
  background: lightblue;
}
.slice:first-child .slice-contents {
  transform: skewY(22.5deg); /* unskew slice contents */
}
.slice:hover .slice-contents { background: violet; } /* highlight on hover */

<ul class='pie'>
  <li class='slice'>
    <div class='slice-contents'></div>
  </li>
  <!-- you can add more slices here -->
<ul>

回答by Games Brainiac

Yes you can: http://jsfiddle.net/elias94xx/3rx7w/, http://jsfiddle.net/elias94xx/3rx7w/2/

是的，你可以：http: //jsfiddle.net/elias94xx/3rx7w/，http: //jsfiddle.net/elias94xx/3rx7w/2/

#chart {
  width: 0;
  height: 0;
  border-right: 60px solid purple;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

<div id="chart"></div>

.chart {
  position: absolute;
  width: 0;
  height: 0;
  border-radius: 60px;
  -moz-border-radius: 60px;
  -webkit-border-radius: 60px;
}

#chart1 {
  border-right: 60px solid red;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart2 {
  border-right: 60px solid transparent;
  border-top: 60px solid green;
  border-left: 60px solid transparent;
  border-bottom: 60px solid transparent;
}

#chart3 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid blue;
  border-bottom: 60px solid transparent;
}

#chart4 {
  border-right: 60px solid transparent;
  border-top: 60px solid transparent;
  border-left: 60px solid transparent;
  border-bottom: 60px solid yellow;
}

<div id="chart1" class="chart"></div>
<div id="chart2" class="chart"></div>
<div id="chart3" class="chart"></div>
<div id="chart4" class="chart"></div>

Source: http://www.paulund.co.uk/how-to-create-different-shapes-in-css

来源：http: //www.paulund.co.uk/how-to-create-different-shapes-in-css

回答by daniel.szaniszlo

You can use html lielement and some css transformto represent each slice of the circle.

您可以使用 htmlli元素和一些 csstransform来表示圆的每个切片。

The tricky part is the transform. In this case I've divided the circle into 5 slices. The calculation is the following. 360/5=72 -> rotate72+90=162 -> skewY

棘手的部分是transform. 在这种情况下，我将圆圈分成了 5 个切片。计算如下。 360/5=72 -> rotate72+90=162 -> skewY

.sliceWrapper {
  position: relative;
  border: 1px solid black;
  padding: 0;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  list-style: none;
  overflow: hidden;
}

.slice {
  position: absolute;
  left: -100%;
  width: 200%;
  height: 200%;
}

li {
  overflow: hidden;
  position: absolute;
  top: -50%;
  right: -50%;
  width: 100%;
  height: 100%;
  transform-origin: 0% 100%;
}

li:first-child {
  transform: rotate(0deg) skewY(162deg);
}

li:nth-child(2) {
  transform: rotate(72deg) skewY(162deg);
}

li:nth-child(3) {
  transform: rotate(144deg) skewY(162deg);
}

li:nth-child(4) {
  transform: rotate(216deg) skewY(162deg);
}

li:nth-child(5) {
  transform: rotate(288deg) skewY(162deg);
}

li:first-child .slice {
  background: green;
}

li:nth-child(2) .slice {
  background: tomato;
}

li:nth-child(3) .slice {
  background: aqua;
}

li:nth-child(4) .slice {
  background: yellow;
}

li:nth-child(5) .slice {
  background: blue;
}

<ul class="sliceWrapper">
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
  <li>
    <div class="slice"></div>
  </li>
</ul>