创建非矩形网页页面元素的常用技术和实例代码

非矩形设计正在变成一种时尚，比如波浪形、菱形、三角形等：

而随着技术发展，这种设计在技术实现上也变得更容易。

本文以最简单的三角形为例，演示使用5种方法来达到非矩形设计的界面效果。

使用透明图片遮盖

优点是兼容性好，IE都能搞定，缺点是性能差。

使用SVG多边形元素

http://wow.techbrood.com/fiddle/33382

优点是能制作很复杂的形状并且在桌面浏览器上得到很好的支持。和其他方法相比，这是目前最推荐的方式。

使用CSS3裁剪路径（clip-path）特性

http://wow.techbrood.com/fiddle/33383

这个方法技术上最先进，性能也理应最好，但可惜兼容性上面，还有一些浏览器不支持（尤其是过时的IE）。

使用CSS3扭曲变换（skew）特性

http://wow.techbrood.com/fiddle/33384

缺点需要引入新元素，并且得小心skew会使得所有子元素也被变形，另外得小心动画的处理。

使用border-radius来实现

（小练习，请自行实现，类似于用border-radius来实现一个三角形。）

总结和建议

推荐使用第2种方法（使用svg），理由是性能比方法1好，兼容性比方法3好，且能实现更为灵活的形状。

如果css3的路径裁剪（clip-path）特性得到更为广泛的支持，那么再切换到纯CSS3的方式。