基于变形的方案

先把图片用一个 div 包裹起来，然后对其应用相反的 rotate() 变形样式，并对图片设置 scale 值为根号 2（尝试着修改代码，去掉 scale(1.42)）

但是我们可以发现，图片被放大后，清晰度下降了。所以可以给图片指定小于实际长度的长度，使得其放大的情况下清晰度有所改善。

注意该方案只适用于正方形图片，不适用于长方形。

裁剪路径方案

我们可以使用 polygon()（多边形）函数来指定一个菱形。实际上，它允许我们用一系列（以逗号分隔的）坐标点来指定任意的多边形。我们甚至可以使用百分比值。

clip-path 甚至可以参与动画，只要我们的动画是在同一种形状函数（比如这里是 polygon()）之间进行的，而且点的数量是相同的。因此，如果我们希望图片在鼠标悬停时平滑地扩展为完整的面积，只需要这么做：

clip-path 方案可以适用于任何矩形，但是浏览器支持有限 http://caniuse.com/#search=clip-path。