demo演示
多边形图
利用css Transition制作动画
介绍
CSS 的 clip-path 属性是改变传统单调的盒子布局，走向响应式设计的通行证。可以摆脱条条框框，自由地在网页上使用六边形、星形等等等进行设计。
如何使用
使用 CSS （ Chrome 24+, Safari 7+, Opera 15+, iOS 7.1+, Android 4.4+, Opera Mobile 24+（注意：所有目前支持的浏览器都需要一个-webkit前缀））
-
使用SVG（上面列出的所有浏览器以及Firefox3.5+）
- 内敛SVG引用
- 外部SVG文件的引用
语法
http://bennettfeely.com/clippy/
基础多边形
.element { clip-path: ploygon(x1 y1, x2 y2, x3 y3, ...) }
x y分别是每个点的坐标，点的绘制会根据顺时针的方向，然后根据直线连接起来
圆形
.element { clip-path: circle(r at x y) };
r是圆的大小，x y分别是圆心的坐标。可以用百分比
椭圆
.element { clip-path: ellipse(w h at x y) };
w为水平宽度，h为垂直高度，x y为椭圆的圆心
矩形
.element { clip-path: inset(x y z p) };
x为离top的距离 y为right的距离 z为bottom的距离 p为left的距离。跟多边形一样也是顺时针，跟多边形不同的是多边形是用边来使用的
svg使用语法
.element { clip-path: url("选择器")}
demo实现
应用
变成
思路：分别是四块，那么就先切除四块菱形的，然后通过定位定到一起
怎么切成四块菱形呢，先整除四块方块的然后再切成菱形的，四块方块的大小为整个图片的一半，
但是方块怎么弄成不一样的呢，通过background-position来设置背景图片位置就可以达到想要的结果了
第一步
四块图片代码如下：
html
<div class="img-clip-block">
<div class="img-clip-wrap">
</div>
<div class="img-clip-wrap">
</div>
<div class="img-clip-wrap">
</div>
<div class="img-clip-wrap">
</div>
</div>
css
.img-clip-wrap {
width: 300px;
height: 300px;
background-image: url("http://karenmenezes.com/shapes-polygon/clip-demo.jpg");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
}
效果图
第二步 切成菱形块，并根据backgrount-position设置成对应的位置
效果图：
html代码没变，
css代码：
.img-clip-wrap {
width: 300px;
height: 300px;
background-image: url("http://karenmenezes.com/shapes-polygon/clip-demo.jpg");
background-repeat: no-repeat;
margin-left: auto;
margin-right: auto;
display: block;
position: relative;
+ -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+ clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.img-clip-wrap:nth-of-type(1) {
background-position: top;
}
.img-clip-wrap:nth-of-type(2) {
background-position: left;
}
.img-clip-wrap:nth-of-type(3) {
background-position: right;
}
.img-clip-wrap:nth-of-type(4) {
background-position: bottom;
}
第三步 调整位置
观察我们要做的图，布局可以是分成三行，其中第二行应该有两个块，然后合在一起, 让第二行左右排列的话，只需要设置菱形块display为inline-block就可以了效果就是这样
看着这样，感觉马上就要成功了，怎么让他们合在一起呢，设置一下margin-top为负的就好了，最终效果就出来啦，最终代码：
<div class="img-clip-block">
<div class="img-clip-row">
<div class="img-clip-wrap">
</div>
</div>
<div class="img-clip-row">
<div class="img-clip-wrap">
</div>
<div class="img-clip-wrap">
</div>
</div>
<div class="img-clip-row">
<div class="img-clip-wrap">
</div>
</div>
</div>
增加的css
.img-clip-row {
margin-top: -154px;
}
.img-clip-row:first-of-type {
margin-top: auto;
}
.img-clip-wrap {
display: inline-block;
}
扩展
本文只是介绍了最基础的知识语法和一点小应用，但是这还是太简单的东西了。
大漠在微博上分享的这个网站：http://species-in-pieces.com/，30个动物30种变换，看了之后简直打开眼界。
