css - 使用 CSS3 分割圆

Question

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

Answer 1

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

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

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

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

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

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

棘手的部分是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>

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>