我想使用CSS做一个循环扇区.这些部门将形成一个完整的圈子.如何使用CSS？
我发现了一个sample,但它是一个四分之一的圆形扇区.我想制作六个圆形扇形圈,形成一个圆圈.我该怎么做？
注意：我不好画,但这里是我想要的样本…
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>
解决方法
我已经完成菜单：
Circular menu v6 – jsFiddle.
此菜单中没有JavaScript.它完成了纯CSS！
这是代码：
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<Meta charset="UTF-8" />
<title>Circular Menu v6</title>
<style type="text/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,#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
}
@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 }
}
</style>
</head>
<body>
<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>
</body>
</html>
