使用 CSS3 分割圆答案

【问题标题】：Segments in a circle using CSS3使用 CSS3 分割圆
【发布时间】：2012-12-20 12:08:47
【问题描述】：

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

【问题讨论】：

你可以用很少的元素和 CSS 旋转变换来做到这一点，但这似乎很痛苦。
先生。尖尖的请告诉我如何...我真的很想知道！ :) Pwetty 请在上面放上糖块！ :)
好吧，我不是 CSS 转换专家，但你基本上会制作 <div> 元素（或其他任何东西），它们将被设置为短线段，然后你会旋转和翻译它们成一个圆圈。这只是解析几何练习:-) Here is the MDN page about what transforms can do.
哦，等等 - 您是在问如何在圆内部绘制径向线段吗？如果是这样，我完全误解了；我以为你是想自己画圆。
是的，圆圈内的部分。这就是我想要的。我的图表是否具有误导性？我希望每个片段在悬停时也能突出显示。

标签： css css-shapes

【解决方案1】：

你可以使用圆锥渐变

圆锥渐变基本上围绕形状，就像一个圆圈，从 0° 到 360°。

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

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

&lt;div&gt;&lt;/div&gt;

使用色标，我们可以神奇地把它变成片段：

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

&lt;div&gt;&lt;/div&gt;

或者，如果我们只想要一个切片，我们现在可以更改它，这样我们就只有一种颜色，现在我们可以开始了:)

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

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

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

如果您不需要切片本身就是元素，您可以简单地使用一个元素和线性渐变来实现 - 请参阅我上个月所做的 rainbow wheel。
如果您需要将切片本身作为元素，则可以通过链接旋转和倾斜变换来实现 - 请参阅我不久前所做的 circular menu。

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

.pie {
  overflow:hidden;
  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>

【讨论】：

圆形菜单消失了:(
@Adam 可能是一个类似的 dabblet，展示了这个想法是如何运作的 dabblet.com/gist/5020696 ... 可能是迟到的评论，但之前没有看到它；）可能看起来也像柑橘 codepen.io/gcyrillus/pen/wutEK

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

是的，您可以：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;
}

&lt;div id="chart"&gt;&lt;/div&gt;

.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

【讨论】：