CSS中实现菱形图片

菱形图片制作

在视觉设计中，把图片裁切为菱形是一种常见的设计手法，但在 CSS
中还没有一种简单直观的方法来实现它。事实上，直到最近，这种效果才基
本成为可能。当网页设计师想要实现这种设计风格时，他们通常不希望在图
像处理软件中预先把图片裁好。显然不用说你也知道，这个方法的可维护性
并不好。如果未来有人想修改图片风格，将很难增加其他效果，而且最终往
往会搞得一团糟。
主要的思路与前一篇攻略“平行四边形”中讨论的第一个解决方案一
致：需要把图片用一个<div>包裹起来，然后对其应用相反的 rotate()
变形样式：

但是，它并没有一步到位地直接达到我们期望的效果，除非我们期望的效果是把它裁成一个八角形——如果是那样的话，我们就可以到此为止然后去研究点儿别的什么。如果要把图片裁成一个
菱形，恐怕还得再费一番周折。
主要问题在于 max-width: 100% 这条声明。 100% 会被解析为容器（ .picture ）的边长。但是，我们想让图片的宽度与容器的对角线相等，而不是与边长相等。你可能已经猜到了，没错，我们又要用到勾股定理了（如果你需要复习一下，