css3实现非矩形图片效果

经常在网站上看到有一些非矩形的图片展示。在以前可能我会毫不犹豫的直接放上张处理好的图片。但是这样的话确实有些不太友好。每每需要换图的时候，都要去开图像处理软件也是蛮拼的。
自从有了css3的选装，妈妈就再也不用担心我不会用ps了。通过一系列的旋转和隐藏的css，理论上可以做出任何形状的图片来。今天在此就以正六边型抛砖引玉一下，介绍一下多边形的大致原理。
首先看下效果图：



实现原理：
这个效果的主要css样式有：
1.transform: rotate(120deg); 图片旋转
2.overflow:hidden; 超出隐藏
我们要用到3层大小是一样的div进行旋转来得到这个效果。
最外层div(p1)旋转120度。第二层(p2)旋转-60度，第三层(p3)再旋转-60度，此时刚好回正。
我们的图片就放在第3层的div中。
经过旋转肯定有超出的部分，因此对3个div都设置overflow:hidden;
经过旋转和对超出部分的隐藏我们就可以得到我们想要的6边形了。
再然后就是通过调整最里层的图片，来达到期望的显示效果了。

<style type="text/css">
.p1{width:200px;height:250px;transform:rotate(120deg);-ms-transform:rotate(120deg);-moz-transform:rotate(120deg);-webkit-transform:rotate(120deg);overflow:hidden;}
.p2{width:200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;}
.p3{width:200px;height:250px;transform:rotate(-60deg);-ms-transform:rotate(-60deg);-moz-transform:rotate(-60deg);-webkit-transform:rotate(-60deg);overflow:hidden;position:relative;}
img{position:absolute;top:0;left:0;width:80%}
</style>

<div class="p1">
<div class="p2">
<div class="p3">
<img src="你的图片地址" />
</div>
</div>
</div>