您的位置：首页 > Web前端 > CSS

自己写的一个饼图

2013-10-20 15:55 337 查看

自己写的一个饼图demo

样式：

html代码：

<body>
<div id="pietest">
<div id="pie1" class="test">
<div class="pie"></div>
</div>
<div id="pie2" class="test">
<div class="pie"></div>
</div>
<div id="pie3" class="test">
<div class="pie"></div>
</div>
<div id="pie4" class="test">
<div class="pie"></div>
</div>
<div id="pie5" class="test">
<div class="pie"></div>
</div>
</div>
</body>

CSS代码：

#pietest{
margin-left: 400px;
margin-top: 100px;
}
.test {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0, 200px, 200px, 100px);
}
.pie {
position: absolute;
width: 200px;
height: 200px;
clip: rect(0px, 100px, 200px, 0px);
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
border-radius: 100px;
}
#pie1 {
margin-top: -10px;
margin-left: 10px;
}
#pie1 .pie {
background-color: red;
transform: rotate(108deg);
}
#pie2 {
-moz-transform: rotate(108deg);
-webkit-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
#pie2 .pie {
background-color: darkcyan;
-moz-transform: rotate(54deg);
-webkit-transform: rotate(54deg);
-o-transform: rotate(54deg);
transform: rotate(54deg);
}
#pie3 {
transform: rotate(162deg);
}
#pie3 .pie {
background-color: green;
-moz-transform: rotate(126deg);
-webkit-transform: rotate(126deg);
-o-transform: rotate(126deg);
transform: rotate(126deg);
}
#pie4 {
transform: rotate(288deg);
}
#pie4 .pie {
background-color: yellow;
-moz-transform: rotate(42deg);
-webkit-transform: rotate(42deg);
-o-transform: rotate(42deg);
transform: rotate(42deg);
}
#pie5 {
transform: rotate(330deg);
}
#pie5 .pie {
background-color: orange;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： CSS

相关文章推荐

新的分享

章节导航