CSS 的 clip-path 属性是改变传统单调的盒子布局，走向响应式设计的通行证。可以摆脱条条框框，自由地在网页上使用六边形、星形等等等进行设计。
使用SVG（上面列出的所有浏览器以及Firefox3.5+）
思路：分别是四块，那么就先切除四块菱形的，然后通过定位定到一起 怎么切成四块菱形呢，先整除四块方块的然后再切成菱形的，四块方块的大小为整个图片的一半， 但是方块怎么弄成不一样的呢，通过background-position来设置背景图片位置就可以达到想要的结果了
四块图片代码如下： html
观察我们要做的图，布局可以是分成三行，其中第二行应该有两个块，然后合在一起 让第二行左右排列的话，只需要设置菱形块display为inline-block就可以了效果就是这样 看着这样，感觉马上就要成功了，怎么让他们合在一起呢，设置一下margin-top为负的就好了，最终效果就出来啦，最终代码：