平行四边形

把所有样式（背景、边框）应用到伪元素上，然后再对伪元素进行变型。因为我们的内容并不是包含在伪元素中，所以内容并不会受到变形的影响。

我们希望伪元素保持良好的灵活性，可以自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单地办法是给宿主元素应用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 
     
      17     click me18 
     

菱形

基于变形的方案：

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 
     
      12     
      13 
     

此时产生的是八角形，效果图：

此时离我们想要的还差一步，需要将图片进行放大，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())之间进行的，而且点的数量是相同的。因此，如果我们希望图片在鼠标悬停时平滑地扩展为完整的面积，只需要这样做：

 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 }

效果图：

 

梯形标签页

对元素使用了3D变形之后，为了防止内部元素也变形，唯一可行的途径就是把变形效果作用在伪元素上。

1 .test{ 2     position: relative; 3     display: inline-block; 4     padding: .5em 1em .35em; 5     color: white; 6  7 } 8 .test::before{ 9     content: '';10     position: absolute;11     top: 0;right: 0;bottom: 0;left: 0;12     z-index: -1;13     background: #58a;14     transform: scaleY(1.3) perspective(.5em) rotateX(5deg);/*同样通过变形属性来改变它的尺寸,经过测试垂直方向上的缩放程度，在达到130%时刚好可以补足它在高度上的缩水*/15     transform-origin: bottom;/*当它在3D空间中旋转时，可以把它的底边固定住*/16 }

效果图：