利用transform skewX制做平行四边形导航菜单

平行四边形实际上是矩形的超集：它的各条边是两两平行的，但各个角则不必定都是直角。在视觉设计中，平行四边形每每能够传达出一种动感。
让咱们试着用 CSS 建立一个按钮状的平行四边形连接。咱们的起点就是一个普通的块状按钮，辅以一些简单的样式，而后，咱们能够经过 skew() 的变形属性来对这个矩形进行斜向拉伸：

transform: skewX(-45deg);

可是，这致使它的内容也发生了斜向变形，这很很差看，并且难读。有没有办法只让容器的形状倾斜，而保持其内容不变呢？

不少人会想到嵌套元素方案，那么咱们能够对内容再应用一次反向的 skew() 变形，从而抵消容器的变形效果，最终产生咱们所指望的结果。不幸的是，这意味着咱们将不得不使用一层额外的 HTML 元素来包裹内容，好比用一个 span：

<a href="www.w3cbest.com" class="button">
 <span>www.w3cbest.com</span>
</a>

.button { transform: skewX(-45deg); }
.button > span { transform: skewX(45deg); }

咱们能够看到，这个方法的表现很不错，但它也意味着咱们不得不添加额外的 HTML 元素。若是结构层的变动是不容许的，或者你但愿严格保持结构层的纯净度，别担忧，咱们还有一个纯 CSS 的解决方案。

伪元素方案

另外一种思路是把全部样式（背景、边框等）应用到伪元素上，而后再对伪元素进行变形。由于咱们的内容并非包含在伪元素里的，因此内容并不会受到变形的影响。下面来看看这个技巧可否获得与前面相同的连接样式。

咱们但愿伪元素保持良好的灵活性，能够自动继承其宿主元素的尺寸，甚至当宿主元素的尺寸是由其内容来决定时仍然如此。一个简单的办法是给宿主元素应用 position: relative 样式，并为伪元素设置 position:absolute，而后再把全部偏移量设置为零，以便让它在水平和垂直方向上都被拉伸至宿主元素的尺寸。代码看起来是这样的：

.button {
 position: relative;
 /* 其余的文字颜色、内边距等样式…… */
}
.button::before {
 content: '';
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
}

此时，用伪元素生成的方块是重叠在内容之上的，一旦给它设置背景，就会遮住内容。为了修复这个问题，咱们能够给伪元素设置z-index: -1 样式，这样它的堆叠层次就会被推到宿主元素以后。如今咱们要作的最后一步，就是尽情地对它设置变形样式，并享受美好的结果。最终版的代码以下所示，它产生的视觉效果跟前文所述技巧是彻底一致的：

.button {
 position: relative;
 /* 其余的文字颜色、内边距等样式…… */
}
.button::before {
 content: ''; /* 用伪元素来生成一个矩形 */
 position: absolute;
 top: 0; right: 0; bottom: 0; left: 0;
 z-index: -1;
 background: #58a;
 transform: skew(45deg);
}

这个技巧不只对 skew() 变形来讲颇有用，还适用于其余任何变形样式，当咱们想变形一个元素而不想变形它的内容时就能够用到它。举个例子，咱们把这个技巧针对 rotate() 变形样式稍稍调整一下，再用到一个正方形元素上，就能够很容易地获得一个菱形。

这个技巧的关键在于，咱们利用伪元素以及定位属性产生了一个方块，而后对伪元素设置样式，并将其放置在其宿主元素的下层。这种思路一样能够运用在其余场景中，从而获得各类各样的效果。

更多精彩