Page 91 - css揭秘

11 菱形图片

背景知识
CSS 变形，“平行四边形”

难题

在视觉设计中，把图片裁切为菱形是一种常见的设计手法，但在 CSS
中还没有一种简单直观的方法来实现它。事实上，直到最近，这种效果才基
本成为可能。当网页设计师想要实现这种设计风格时，他们通常不希望在图
像处理软件中预先把图片裁好。显然不用说你也知道，这个方法的可维护性
并不好。如果未来有人想修改图片风格，将很难增加其他效果，而且最终往
往会搞得一团糟。
想必现在有更好的办法了吧？没错，而且有两种办法！

图 3-17
自从 2013 年改版以来，24ways.
org 一直把作者的头像显示为一
个菱形。它所使用的正是这里要
讨论的技巧

基于变形的方案

主要的思路与前一篇攻略“平行四边形”中讨论的第一个解决方案一
致：需要把图片用一个 <div> 包裹起来，然后对其应用相反的 rotate()
变形样式：

60 第 3 章 形状

඀ࠡ JOEC