使用纯css制作扇形图,合并起来形成饼图:
应该知道css3中引入了圆角属性(border-radius),一旦设置这个值,边框即会出现圆角。同样,我们对正方形设置圆角,即可得到饼状图
html:<div id="circle">11</div>
css:
#circle{
width:0
height:0
border-radius:100px
border-width:100px
border-style:solid
border-color: red blue green yellow
line-height:99em
overflow:hidden
cursor:pointer
margin: 30px auto
}
效果:
4.同样我们对其中三个边框设置透明色即可得到扇形
html:<div id="fan">11</div>
css:
#fan{
width:0
height:0
border-radius:100px
border-width:100px
border-style:solid
border-color:red transparent transparent transparent
line-height:99em
overflow:hidden
cursor:pointer
margin: 30px auto
}
效果:
#navmenu2{width:150px
text-align:center
float:left
}
#navmenu2 ul{
padding:0px
margin:0px
list-style:none
}
#navmenu2 li{
margin:0px
}
#navmenu2 a{
display:block
text-decoration:none
width:120px
border:1px
border-right:10px
border-left:20px
border-color:#60C
border-style:solid
background-color:#00F
color:#FFF
padding:7px 0px 7px 0px
}
#navmenu2 a:hover {
background-color:#000
color:#09F
border-left-color:#09f
border-right-color:#09f
border-top-color:#60c
border-bottom-color:#60c
}