非矩形设计正在变成一种时尚，比如波浪形、菱形、三角形等：
而随着技术发展，这种设计在技术实现上也变得更容易。
本文以最简单的三角形为例，演示使用5种方法来达到非矩形设计的界面效果（效果图如下所示）。
使用透明图片遮盖
代码如下：
优点是兼容性好，IE都能搞定，缺点是性能差。
使用SVG多边形元素
代码如下：
优点是能制作很复杂的形状并且在桌面浏览器上得到很好的支持。和其他方法相比，这是目前最推荐的方式。
使用CSS3裁剪路径（clip-path）特性
代码如下：
这个方法技术上最先进，性能也理应最好，但可惜兼容性上面，还有一些浏览器不支持（尤其是过时的IE）。
使用CSS3扭曲变换（skew）特性
代码如下：
缺点需要引入新元素，并且得小心skew会使得所有子元素也被变形，另外得小心动画的处理。
使用border-radius来实现
（小练习，请自行实现，类似于用border-radius来实现一个三角形。）
总结和建议
推荐使用第2种方法（使用svg），理由是性能比方法1好，兼容性比方法3好，且能实现更为灵活的形状。
如果css3的路径裁剪（clip-path）特性得到更为广泛的支持，那么再切换到纯CSS3的方式。