平行四边形
把所有样式（背景、边框）应用到伪元素上，然后再对伪元素进行变型。因为我们的内容并不是包含在伪元素中，所以内容并不会受到变形的影响。
我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单地办法是给宿主元素应用postion:relative样式，并为伪元素设置position:absolute，然后再把所有偏移量设置为0，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
1 .test { 2 padding: 10px; 3 position: relative; 4 color: white; 5 float: left; 6 7 } 8 .test::before{ 9 background: #58a; 10 content: ‘‘; 11 position: absolute; 12 top: 0;right: 0;left: 0;bottom: 0; 13 z-index: -1;//这样它的堆叠层次就会被推到宿主元素之后 14 transform: skew(45deg); 15 } 16 <div class="test"> 17 click me 18 </div>
菱形
基于变形的方案：
1 .test{ 2 width: 180px; 3 height: 180px; 4 transform: rotate(45deg); 5 overflow: hidden; 6 } 7 img{ 8 max-width: 100%; 9 transform: rotate(-45deg); 10 } 11 <div class="test"> 12 <img src="111.png" > 13 </div>
此时产生的是八角形，效果图：
此时离我们想要的还差一步，需要将图片进行放大，scale(1.42) 即可。
裁切路径方案：
裁切路径允许我们把元素裁剪为我们想要的任何形状。在这个例子中，我们将会使用polygon()（多边形）函数来指定一个菱形。
1 img{ 2 clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); 3 transition: 1s clip-path; 4 }
clip-path所能创造的奇迹不止于此。这个属性可以参与动画。只要我们的动画是在同一种形状函数(比如这里是polygon())之间进行的，而且点的数量是相同的。因此，如果我们希望图片在鼠标悬停时平滑地扩展为完整的面积，只需要这样做：
1 img:hover{ clip-path: polygon(0 0,100% 0,100% 100%,0 100%); }
切角效果
假设我们只需要一个角被切掉的效果，以右下角为例。这其中最大的窍门在于充分利用渐变的一大特性：渐变可以接受一个角度（比如45deg）作为方向，而且色标的位置信息也可以是绝对的长度值，这一点丝毫不受容器尺寸的影响。假设切角的深度是15px：
1 .test{ 2 width: 300px; 3 height: 200px; 4 background: #58a; 5 background: linear-gradient(-45deg,transparent 15px ,#58a 0) 6 7 }
效果图：
其实，第一行声明并不是必须的，加上它是将其作为回退机制：如果某些浏览器不支持CSS渐变，那第二行声明就会被丢弃。
若想要实现两个角被切掉的效果，以底部的两个角为例。
1 .test{ 2 width: 300px; 3 height: 200px; 4 background: #58a; 5 background: linear-gradient(-45deg,transparent 15px ,#58a 0) right,linear-gradient(45deg,transparent 15px ,#655 0) left; 6 background-size: 50% 100%; 7 background-repeat: no-repeat; 8 9 }
效果图：
切掉4个角：
1 .test{ 2 width: 300px; 3 height: 200px; 4 background: #58a; 5 background: 6 linear-gradient(135deg,transparent 15px ,#58a 0) top left, 7 linear-gradient(-135deg,transparent 15px ,#58a 0) top right, 8 linear-gradient(-45deg,transparent 15px ,#58a 0) bottom right, 9 linear-gradient(45deg,transparent 15px ,#58a 0) bottom left; 10 background-size: 50% 50%; 11 background-repeat: no-repeat; 12 13 }
效果图：
弧形切角
将线性渐变改为径向渐变即可，将linear-gradient变为radial-gradient即可。
1 .test{ 2 width: 300px; 3 height: 200px; 4 background: #58a; 5 background: 6 radial-gradient(circle at top left,transparent 15px ,#58a 0) top left, 7 radial-gradient(circle at top right,transparent 15px ,#58a 0) top right, 8 radial-gradient(circle at bottom right,transparent 15px ,#58a 0) bottom right, 9 radial-gradient(circle at bottom left,transparent 15px ,#58a 0) bottom left; 10 background-size: 50% 50%; 11 background-repeat: no-repeat; 12 13 }
效果图
：
原文：http://www.cnblogs.com/xiaoli52qd/p/6398058.html