平行四边形实际上是矩形的超集：它的边相互平行，但它的角不一定是直角。在视觉设计中，平行四边形往往能传达出运动感。让我们尝试使用CSS创建一个类似按钮的平行四边形链接。我们的出发点是一个普通的块状按钮，辅以一些简单的样式，然后我们可以通过skew()的变形属性将矩形斜向拉伸：transform:skewX(-45deg);但是，这也导致其内容歪斜，丑陋且难以阅读。有没有办法在保持容器内容物的同时只扭曲容器的形状？很多人会想到嵌套元素方案，那么我们可以对内容进行反向skew()变形，从而抵消容器的变形效果，最终产生我们期望的结果。不幸的是，这意味着我们将不得不使用额外的HTML元素层来包装内容，例如span：www.w3cbest。com.button{转换：skewX(-45deg);}.button>span{变换：skewX(45deg);我们可以看到这个方法工作得很好，但它也意味着我们必须添加额外的HTML元素。如果不允许更改结构层，或者你想严格保持结构层的纯度，不用担心，我们也有纯CSS的解决方案。伪元素解决方案的另一种思考方式是将所有样式（背景、边框等）应用于伪元素，然后对伪元素进行变形。因为我们的内容不包含在伪元素中，所以内容不会受到转换的影响。让我们看看这个技巧是否可以获得与以前相同的链接样式。我们希望伪元素保持足够的灵活性以自动继承其宿主元素的大小，即使宿主元素的大小由其内容决定。一个简单的解决方案是应用position:relative到宿主元素和position:absolute到伪元素，然后将所有偏移量设置为零，以便它在水平和垂直方向上都拉伸到宿主元素的大小。代码如下所示：.button{position:relative;/*其他文本颜色、填充等...*/}.button::before{content:'';位置：绝对；顶部：0；右：0；底部：0；left:0;}至此，伪元素生成的框就叠加在了内容上，一旦设置好背景，它就会覆盖内容。为了解决这个问题，我们可以使用z-index:-1来设置伪元素的样式，这样它的堆叠层级就会被推到宿主元素后面。现在我们要做的最后一步是将它变成我们心中的内容并享受美丽的结果。代码的最终版本如下，其产生的视觉效果与上述技术完全相同：.button{position:relative;/*其他样式，例如文本颜色、内边距...*/}.button::before{content:'';/*使用伪元素生成矩形*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：-1；背景：#58a；transform:skew(45deg);}这种技术不仅对skew()变换很有用，而且对任何其他变换样式都很有用，当我们想要变形元素而不改变其内容时。例如，我们可以通过对rotate()变换样式稍微调整此技术并将其应用于方形元素来轻松获得菱形。这个技巧的关键是我们使用伪元素和定位属性生成一个框，然后设置伪元素的样式并将其放置在其宿主元素下方。这个想法也可以用在其他场景中，以获得各种效果。更令人兴奋的
