在使用CSS3的圆段(Segments in a circle using CSS3)

我知道你可以使用圆角半径黑客使CSS3一个圆。但有什么办法，使他们有这样的画面部分？有没有经过HTML和CSS这样做，但不是JS的一种方式？

Answer 1:

是的，你可以使用以下两种方法中的任何一个获得定制角度等片：

如果你不需要的片断，元素本身，则你可以简单地用一个元素和线性渐变做到这一点-看到这个彩虹轮我上个月做了。
如果您需要切片是元素本身，那么你可以通过链接旋转和倾斜变换做到这一点-看到这个圆形菜单我做了，而以前。

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

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

文章来源: Segments in a circle using CSS3