使用CSS3在一个圆圈中的细分

Question

我知道你可以使用border radius hack在CSS3中创建一个圆圈。但有没有办法让他们像这张照片一样有片段？有没有办法通过HTML和CSS而不是JS？

Answer 1

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

1. 如果您不需要将切片作为元素本身，您可以使用一个元素和线性渐变来执行此操作 - 请参阅上个月我做过的rainbow wheel。
2. 如果您需要将切片作为元素本身，那么您可以通过链接旋转和倾斜变换来实现 - 请参阅我之前做过的circular menu。

对于＃2，请参阅我现在所做的非常简化的example。

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

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

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

Answer 3

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

棘手的部分是360/5=72 -> rotate。在这种情况下，我已将圆分成5个切片。 计算如下。 72+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>

ModelState

Answer 4

您可以使用圆锥形渐变

基本梯度从0°到360°基本上围绕一个圆形，像一个圆形。

这是一个基本的圆锥渐变，带有一个圆圈：

div {
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: red; /* fallback */
    background: conic-gradient(red, orange, yellow, green, blue, purple);
}

<div></div>

使用色标，然后我们可以神奇地将其分成多个部分：

div {
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: red; /* fallback */
    background: conic-gradient(red 10%, orange 10%, orange 30%, yellow 30%, yellow 50%, green 50%, green 60%, blue 60%, blue 70%, purple 70%);
}

<div></div>

可选地，如果我们只想要一个切片，我们现在可以更改它，所以我们只有一种颜色，现在我们可以开始了：）

div {
    width: 500px;
    height: 500px;
    border-radius: 9999px;
    background: red; /* fallback */
    background: conic-gradient(#0000 40%, red 40%, red 70%, #0000 70%);
}

<div></div>