Page 88 - css揭秘
P. 88
10 平行四边形
背景知识
基本的 CSS 变形
难题
平行四边形其实是矩形的超集：它的各条边是两两平行的，但各个角则
不一定都是直角（参见图 3-11）。在视觉设计中，平行四边形往往可以传达
出一种动感（参见图 3-12）。
让我们试着用 CSS 创建一个按钮状的平行四边形链接。我们的起点就
是一个普通的块状按钮，辅以一些简单的样式，如图 3-13 所示。然后，我
们可以通过 skew() 的变形属性来对这个矩形进行斜向拉伸： 图 3-11
平行四边形
transform: skewX(-45deg);
图 3-12
网页设计中的平行四边形（由
Martina Pitakova 设计）
图 3-13
我们的按钮，在应用任何变形样
式之前
10 平行四边形 57
ࠡ JOEC
