转载

CSS秘密花园：平行四边形

《 CSS Secrets 》是 @Lea Verou 最新著作，这本书讲解了有关于CSS中一些小秘密。是一本CSSer值得一读的一本书，经过一段时间的阅读，我、@南北和@彦子一起将在W3cplus发布一系列相关的读后感，与大家一起分享。

CSS秘密花园：平行四边形

问题

平行四边形是矩形的一个超集：它的边是平行的，但是角不一定是直角。

CSS秘密花园：平行四边形

图注:一个平行四边形

在视觉设计，它们往往可以使设计显得更具活力，传达运动感。

CSS秘密花园：平行四边形

图注：eb设计中的平行四边形（design by Martina Pitakova）

我们尝试用CSS创建按钮样式的链接。从普通的扁平按钮开始，带一些简单的样式，如图下图所示:

CSS秘密花园：平行四边形

然后，我们应用 skew() 变换创建出倾斜的矩形，如下：

transform: skewX(-45deg);

但是，这也会导致平行四边形中的内容被倾斜，这使得它看起来很丑而且没有可读性。

CSS秘密花园：平行四边形

图注：倾斜后的按钮，文本变得难以阅读

有什么办法可以只倾斜外边的形状容器，而不倾斜里边的内容吗？

嵌套元素的解决方案

我们可以给内容应用一个相反的 skew() 变换，把外边的变换抵消，这样就可以得到我们想要的结果。但是，这也意味着我们必须使用额外的HTML元素来包裹内容，如一个 div ：

<a href="#yolo" class="button">  <div>Click me</div> </a> .button { transform: skewX(-45deg); } .button > div { transform: skewX(45deg); }

如果你是给默认内联的元素应用这个效果，记得把它的 display 属性设置为 inline-block 或 block ，否则应用的变换不会生效。内部元素也一样。

正如下图的效果：

CSS秘密花园：平行四边形

如如你看到，它运行没有问题，但是我们使用了一个额外的HTML元素。如果修改标签不是一个可选的方案，或者你真的希望保持标签纯度，别担心，这里还有一个纯CSS的解决方案。

伪元素解决方案

另一个方案是把所有的样式应用在伪元素上（背景、边框等等），然后为其应用变换。因为我们的内容不是被包裹在伪元素中的，它不会被变换影响。我们尝试使用这种技术给一个链接添加样式，跟前一节一样的方法。

我们需要让伪元素保持灵活性，并自动继承父元素的尺寸，即使它们的大小由内容决定。一个简单的方法时是父元素应用 position: relative ，然后给生成的元素应用 position: absolute ，然后把所有的偏移量都设置为 0 ，这样它的水平和垂直方向都会继承父元素的大小。代码如下：

.button {  position: relative;  /* text color, paddings, etc. */ } .button::before {  content: '';  position: absolute;  top: 0; right: 0; bottom: 0; left: 0; }

此时，生成的盒子是悬浮在内容上边的，一旦给它应用了背景，它将会覆盖住内容:

CSS秘密花园：平行四边形

图注：我们的伪元素当前是悬浮在内容上边的，所以应用 background: #58a 来覆盖

我们可以给伪元素应用一个 z-index: -1 ，这样它就会移动到父元素下方了。

现在，终于可以给我们的主要元素应用变换，然后查看结果了。最后的代码如下，生成的效果和前面的方案生成的效果完全一样：

.button {  position: relative;  /* text color, paddings, etc. */ } .button::before {  content: ''; /* To generate the box */  position: absolute;  top: 0; right: 0; bottom: 0; left: 0;  z-index: -1;  background: #58a;  transform: skew(45deg); }

这些技术不仅对 skew() 变换有效。它们还可以结合其它变换使用，这样既可以改变元素的形状，但又不会对它的内容造成影响。例如，给一个方形元素使用 rotate() 变换，可以很容易地生成一个钻石（菱形）形状。

还有，使用伪元素和定位来生成一个盒子，并添加样式，然后放置在父元素之下的方法，在很多其它的不同类型的效果实例中都可以使用，如：

一种常见的解决IE8中多背景的方法，由 Nicolas Gallagher 提供。
可以解决像第二章第四节中的“Inner rounding”这样的效果，能猜到是怎么实现的吗？
可以用来单独给背景应用像 opacity 这样的属性，由 Nicolas Gallagher 首创。
可以用来模拟多边框，以一种更灵活的方法。这样我们不可以使用第二章第二节的“Multiple borders”的技术。例如，当我们需要多个虚线边框，或多个用空格分隔的边框和透明度时。

正文到此结束