clip-path 教程：使用 CSS 中的 clip-path 轻松实现多边形

作为一个前端开发，一个主要的工作就是来实现设计师设计的UI界面。而在UI界面中，各种各样的形状元素应用则是随处可见，比如三角形：



以前碰到这种形状的时候，会使用各种黑科技的技巧，比如使用CSS中的border属性来模拟实现这类型的三角形就是一种主流的实现方法。

虽然种实现方法看起来很灵巧，但是为来实现这一个小小的三角形，就不得不添加无意义的标签，而且使用起来非常的笨拙不是很灵活。在远古的前端开发时代，一般都是直接切图来实现的。

不过，今时不同往日，有了CSS3中clip-path这个属性，我们就可以轻松的使用几行代码实现各种不同的形状。简单的说它就是利用遮罩的方法，连接坐标绘制遮罩区域，就可以做出许多不同的形状，让底色或者是地图按遮罩的区域显示出来。

把这个属性玩的出神入化的是这个网站http://species-in-pieces.com/，可以打开感受一下。

基本的介绍完了，正式开车。

首先介绍一个clip-path的神器，http://bennettfeely.com/clippy/，这个网站是专门用来生成各种形状的，并且直接生成clip-path的代码，可以直接在上面任意的拖拉修改：



可以看到在下面的代码区域，实时生成了对应的CSS代码，非常的方便。

下面就通过一个最简单的三角形来体验下使用clip-path实现多边形是多么的方便。

先准备基本的HTML代码：

<div class="triangles"></div>

css代码：

width: 200px;
height: 200px;
background-color:red;

上面的代码就是一个正常的矩形：



接下来直接在http://bennettfeely.com/clippy/这个网站上拉出一个三角形的然后复制对应的CSS代码：

-webkit-clip-path: polygon(48% 0, 0% 100%, 100% 100%);
clip-path: polygon(48% 0, 0% 100%, 100% 100%);

把这两行代码放入到上面的CSS代码中：

.triangles {
width: 200px;
height: 200px;
background-color:red;-webkit-clip-path: polygon(48% 0, 0% 100%, 100% 100%);
clip-path: polygon(48% 0, 0% 100%, 100% 100%);}

就是这么简单，一个三角形就实现了。



代码地址

至于浏览器支持度，现在在移动端Android4.4以上和IOS9以上的系统是可以放心大胆的使用了。

clip-path的详细知识可以去下面两个地址看看。

MDN

Codrops clip-path