正六边形

标签：.com   技术   box   ima   分享   http   技术分享   css3   tran   

用CSS3做的六边形

代码如下：

<style>
.cla{margin-top: 100px;margin-left: 100px;}
.cla div{
width: 80px;
height: 46px;
background: red;
}
.c1,.c2{
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
transform: rotate(60deg);
}
.c1{

-webkit-box-shadow: 5px 0px 1px #aaa;
box-shadow: 5px 0px 1px #aaa;
}
.c2{
-webkit-box-shadow: 4px -4px 0 #aaa;
box-shadow: 4px -4px 0 #aaa;
}
.c3{
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
transform: rotate(-120deg);
-webkit-box-shadow: 4px 4px 0 #aaa;
box-shadow: 4px 4px 0 #aaa;
}
.c3 img{
width: 103%;
margin-top: -30%;
margin-left: -1px;
}

</style>
<div class="cla">
<div class="c1">
<div class="c2">
<div class="c3">
<img src="001.png"/>
</div>
</div>
</div>
</div>

正六边形

标签：.com   技术   box   ima   分享   http   技术分享   css3   tran   

原文地址：http://www.cnblogs.com/qiang-ling/p/6641514.html