菱形

clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);这条属性可以生成一个自适应的菱形，可以应用动画，且能适应非正方形的图片。clip-path是裁剪的意思，polygon是多边形的意思。

来看下兼容性：
(点击查看大图)

实测连chrome都不支持。

切角

第一种方法，利用线性渐变（径向渐变），将一个角的颜色设置为透明，即可产生一个角被切掉的效果，如果需要多个角被切掉的效果，就需要多写几层渐变，并且关闭background-repeat，减小相应的backgronud-size，演示如下（之后好几个演示，国外网站加载你懂的）：

See the Pen cornercut1 by ShiLei (@nervouself) on CodePen.

See the Pen LxPOLj by ShiLei (@nervouself) on CodePen.

See the Pen cornercut3 by ShiLei (@nervouself) on CodePen.

svg可以完美缩放，而border-image又是将图片九宫格切割应用到边框四周，所以可以利用这个特性做出切角效果：

See the Pen cornercut4 by ShiLei (@nervouself) on CodePen.

最后还有一种方法就是用clip-path和polygon把四个角切掉了！(╯▔皿▔)╯︵┻━┻

梯形

书中的解决方案是用伪元素进行3D旋转，将矩形旋转成梯形，演示如下：

See the Pen trapezoid by ShiLei (@nervouself) on CodePen.

但是这种方法的兼容性不太好，IE10+，不是太好应用，我选择用伪元素填两边。

新年快乐！！

新的一年到来了，又到了立flag的时候！！但是flag不就是用来倒的吗！！所以我就不立了！！（其实刚立了已经倒了，不然我为什么这么说，摊手），大家新年快乐，心想事成啊！！(●’◡’●)