平行四边形
我们可以通过skew()的变形属性来对这个矩形进行斜向拉伸。trasnsform:skewX(-45deg);这样会导致内容也发生斜向变形。
嵌套元素方案：我们可以对内容在应用一次反向的skew()变形，从而抵消容器的变形效果。如果想把这个效果应用到一个默认显示为行内的元素，需要把它的displlay属性设置为inline-blick或block，否则变形是不会生效的。这一点对内层的元素也是适用的。
伪元素解决方案：把所有样式（背景，边框等）应用到伪元素上，然后对伪元素进行变形。因为我们的内容并不是包含在伪元素里地，所以内容并不会受到变形的影响。
伪元素应该自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单地方法是给宿主元素应用position:relative样式，并为伪元素设置position:absolute,然后再把所有偏移量设置为零，以便它在水平和垂直方向上都被拉伸至宿主元素的尺寸。
菱形图片
嵌套元素方案：需要把图片用一个div包裹起来，然后对其应用相反的rotate()变形样式：
clip-path属性把元素裁剪为我们想要的任何形状。polugon()函数指定一个菱形。实际上它允许我们用一系列坐标点来指定任意的多边形。clip-path:poly(50% 0,100% 50%,50% 100%,0 50%);clip-path还可以参与动画，只有我们的动画是在同一形状函数之间进行的。
切角效果
一种方案：使用背景图片盖住元素来达到目的。比如使用三角形盖住元素的顶角来模拟切角效果。
CSS渐变：background: #58a;
background:
linear-gradient(135deg, transparent 15px, #58a 0)
top left,
linear-gradient(-135deg, transparent 15px, #58a 0)
top right,
linear-gradient(-45deg, transparent 15px, #58a 0)
bottom right,
linear-gradient(45deg, transparent 15px, #58a 0)
bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
弧形切角：
background: #58a;
background:
radial-gradient(circle at top left,
transparent 15px, #58a 0) top left,
radial-gradient(circle at top right,
transparent 15px, #58a 0) top right,
radial-gradient(circle at bottom right,
transparent 15px, #58a 0) bottom right,
radial-gradient(circle at bottom left,
transparent 15px, #58a 0) bottom left;
background-size: 50% 50%;
background-repeat: no-repeat;
内联SVG与border-image方案：
border: 20px solid #58a;
border-image: 1 url('data:image/svg+xml,\
<svg xmlns="http://www.w3.org/2000/svg"\
width="3" height="3" fill="%2358a">\
<polygon points="0,1 1,0 2,0 3,1 3,2 2,3 1,3 0,2"/>\
</svg>');
background: #58a;
background-clip: padding-box;
clip-path实现切角
polygon(20px 0, calc(100% - 20px) 0, 100% 20px, 100% calc(100% - 20px),
calc(100% - 20px) 100%,
20px 100%, 0 calc(100% - 20px), 0 20px);
切出一个多边形。个人感觉这种方式实现最方便，只是要考虑浏览器的支持。
梯形标签页
常用方式：使用精心设计的背景图片来实现梯形，或者使用边框来模拟梯形两侧的斜边。
使用3D旋转。