我怎样才能使用CSS使扇形(How can I make a circular sector usi

我想用CSS来制作一个扇形。 该行业将形成一个完整的圆。 我怎样才能使用CSS呢？

我发现了一个样本 ，但它使四分之一扇形。 我要让六个圆弧部门，使一个完整的圆。 我怎么能做到吗？

注：我不擅长画画，但这里有我想要的样本...

 div { width: 50px; height: 50px; background-color: #ccc; background-color: #ccc; -moz-border-radius: 100px; border-radius: 100px; } #center { position: relative; margin: 100px 0 0 100px; border: solid #fff 1px; } #tl,#tr,#bl,#br { position: absolute; height: 75px; width: 75px; z-index: -1; } #tl { border-radius: 100px 0 0 0; -moz-border-radius: 100px 0 0 0; top: -50px; left: -50px; } #tr { border-radius: 0 100px 0 0; -moz-border-radius: 0 100px 0 0; top: -50px; left: 26px; } #bl { border-radius: 0 0 0 100px; -moz-border-radius: 0 0 0 100px; top: 26px; left: -50px; } #br { border-radius: 0 0 100px 0; -moz-border-radius: 0 0 100px 0; top: 26px; left: 26px; } 

 <div id="center"> <div id="tl"></div> <div id="tr"></div> <div id="bl"></div> <div id="br"></div> </div> 

Answer 1:

我已经完成了菜单： 圆形菜单V6 -的jsfiddle 。

没有参与这个菜单的JavaScript。 它在纯CSS完成的！

下面是代码：

 #menu { background: #aaa; position: relative; width: 200px; height: 200px; margin: 0 auto; overflow: hidden; border-radius: 100px; -moz-border-radius: 100px; -webkit-border-radius: 100px; } #center { position: absolute; left: 70px; top: 70px; width: 60px; height: 60px; z-index: 10; background: #eee; background: linear-gradient(top, #eee, #aaa); background: -moz-linear-gradient(top, #eee, #aaa); background: -webkit-gradient(linear, left top, left bottom, from(#eee), to(#aaa)); border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; } #center a { display: block; width: 100%; height: 100% } .item { background: #aaa; overflow: hidden; position: absolute; width: 100px; height: 100px; transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; transition: background .5s; -moz-transition: background .5s; -webkit-transition: background .5s; -o-transition: background .5s; -ms-transition: background .5s; } .item:hover { background: #eee } .item1 { z-index: 1; transform: rotate(60deg); -moz-transform: rotate(60deg); -webkit-transform: rotate(60deg); } .item2 { z-index: 2; transform: rotate(120deg); -moz-transform: rotate(120deg); -webkit-transform: rotate(120deg); } .item3 { z-index: 3; transform: rotate(180deg); -moz-transform: rotate(180deg); -webkit-transform: rotate(180deg); } .item4 { z-index: 4; transform: rotate(240deg); -moz-transform: rotate(240deg); -webkit-transform: rotate(240deg); } .item5 { z-index: 5; transform: rotate(300deg); -moz-transform: rotate(300deg); -webkit-transform: rotate(300deg); } .item6 { border: none; position: absolute; z-index: 6; transform: rotate(-30deg); -moz-transform: rotate(-30deg); -webkit-transform: rotate(-30deg); } #wrapper6 { position: absolute; width: 100px; height: 100px; overflow: hidden; transform-origin: 100% 100%; -moz-transform-origin: 100% 100%; -webkit-transform-origin: 100% 100%; } .item1 .content { left: -10px; top: 15px; transform: rotate(-60deg); -moz-transform: rotate(-60deg); -webkit-transform: rotate(-60deg); } .item2 .content { left: -11px; top: 16px; transform: rotate(-120deg); -moz-transform: rotate(-120deg); -webkit-transform: rotate(-120deg); } .item3 .content { left: -7px; top: 12px; transform: rotate(-180deg); -moz-transform: rotate(-180deg); -webkit-transform: rotate(-180deg); } .item4 .content { left: -5px; top: 18px; transform: rotate(-240deg); -moz-transform: rotate(-240deg); -webkit-transform: rotate(-240deg); } .item5 .content { left: -10px; top: 20px; transform: rotate(-300deg); -moz-transform: rotate(-300deg); -webkit-transform: rotate(-300deg); } .item6 .content { left: 20px; top: -10px; transform: rotate(30deg); -moz-transform: rotate(30deg); -webkit-transform: rotate(30deg); } .content, .content a { width: 100%; height: 100%; text-align: center } .content { position: absolute; } .content a { line-height: 100px; display: block; position: absolute; text-decoration: none; font-family: 'Segoe UI', Arial, Verdana, sans-serif; font-size: 20px; text-shadow: 1px 1px #eee; text-shadow: 0 0 5px #fff, 0 0 5px #fff, 0 0 5px #fff } .display-target { display: none; text-align: center; opacity: 0; } .display-target:target { display: block; opacity: 1; animation: fade-in 1s; -moz-animation: fade-in 1s; -webkit-animation: fade-in 1s; -o-animation: fade-in 1s; -ms-animation: fade-in 1s; } @keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @-moz-keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @-webkit-keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @-o-keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } @-ms-keyframes fade-in { from { opacity: 0 } to { opacity: 1 } } 

 <div id="menu"> <div class="item1 item"> <div class="content"><a href="#one">one</a></div> </div> <div class="item2 item"> <div class="content"><a href="#two">two</a></div> </div> <div class="item3 item"> <div class="content"><a href="#three">three</a></div> </div> <div class="item4 item"> <div class="content"><a href="#four">four</a></div> </div> <div class="item5 item"> <div class="content"><a href="#five">five</a></div> </div> <div id="wrapper6"> <div class="item6 item"> <div class="content"><a href="#six">six</a></div> </div> </div> <div id="center"> <a href="#"></a> </div> </div> <div id="one" class="display-target">Welcome! <br />This changing effect is done by ...</div> <div id="two" class="display-target">... having <code>&lt;div&gt;</code>s with <code>id</code>s ... </div> <div id="three" class="display-target">... that have the style <code>display: none</code> and the style <pre style="text-align: left">:target { display: block; }</pre>so that these messages appear when there is a hash tag like <code>#three</code> (look at the address bar!)</div> <div id="four" class="display-target">Look at the source of this page ...</div> <div id="five" class="display-target">... to see how the circular menu works.</div> <div id="six" class="display-target">By Shaquin Trifonoff</div> <p><a href="http://stackoverflow.com/users/1421049/shaquin-trifonoff" title="My profile on Stack Overflow">By Shaquin Trifonoff</a></p> 

Answer 2:

简单的圆形6个部门分隔

伪元素使用的边界，使三角形：

DEMO

输出：

 .circle { position: relative; display: inline-block; width: 300px; height: 300px; border-radius: 50%; overflow: hidden; } .circle:before, .circle:after, .circle > div:before, .circle > div:after { content: ''; position: absolute; z-index: -1; } .circle:before { bottom: 50%; left: 50%; margin-left: 2px; margin-bottom: 2px; border-top: 300px solid transparent; border-right: 150px solid gold; } .circle:after { top: 50%; left: 50%; margin-left: 2px; margin-top: 2px; border-right: 150px solid gold; border-bottom: 300px solid transparent; } .sector1:before { bottom: 50%; right: 50%; margin-right: 2px; margin-bottom: 2px; border-top: 300px solid transparent; border-left: 150px solid gold; } .sector1:after { bottom: 50%; margin-bottom: 5px; border-top: 300px solid gold; border-right: 150px solid transparent; border-left: 150px solid transparent; } .sector2:before { top: 50%; right: 50%; margin-right: 2px; margin-top: 2px; border-bottom: 300px solid transparent; border-left: 150px solid gold; } .sector2:after { top: 50%; margin-top: 5px; border-right: 150px solid transparent; border-bottom: 300px solid gold; border-left: 150px solid transparent; } .round-middle { position: absolute; top: 96px; left: 96px; width: 100px; height: 100px; border: 4px solid #fff; border-radius: 50%; background: gold; } 

 <div class="circle"> <div class="sector1"></div> <div class="sector2"></div> <div class="round-middle"></div> </div> 

Answer 3:

这是可以做到用-moz-transform ，试试这个小提琴 。 其实，我们并不需要.sec1.sec_到.sec4.sec_ 。 然后.sec5.sec_是.sec6

 #container { margin: 50px 0 0 50px; position: relative; } #center { position: absolute; width: 50px; height: 50px; background-color: #ccc; -moz-border-radius: 100px; border-radius: 100px; position: relative; margin: 50px 0 0 0px; border: solid #fff 1px; z-index: 1000; } .outer_sec { width: 75px; height: 75px; overflow: hidden; position: absolute; left: -50px; top: 25px; } .sec { position: absolute; height: 75px; width: 75px; z-index: 1; border-radius: 100px 0 0 0; -moz-border-radius: 100px 0 0 0; top: -50px; left: -50px; -moz-transform-origin: 100% 100%; cursor: pointer; } .sec1.sec { -moz-transform: rotate(0deg); z-index: 1; background-color: #cc1; } .sec2.sec { -moz-transform: rotate(60deg); z-index: 2; background-color: #cb2; } .sec3.sec { -moz-transform: rotate(120deg); z-index: 3; background-color: #ca3; } .sec4.sec { -moz-transform: rotate(180deg); z-index: 4; background-color: #c94; } .sec5.sec { -moz-transform: rotate(240deg); z-index: 5; background-color: #c85; } .sec6.sec { -moz-transform: rotate(300deg); z-index: 6; margin: 0px 0px 0px 50px; background-color: #c76; top: -74px; } .sec:hover { background-color: #06c; } 

 <div id="container"> <div class="sec1 sec"></div> <div class="sec2 sec"></div> <div class="sec3 sec"></div> <div class="sec4 sec"></div> <div class="sec5 sec"></div> <div class="outer_sec"> <div class="sec6 sec"></div> </div> <div id="center"></div> </div> 

文章来源: How can I make a circular sector using CSS