纯 css 实现：如何做个完美的平行四边形

作者：南极一块修炼千年的大冰块

2022 年 7 月 20 日
本文字数：1756 字
阅读完需：约 6 分钟

前言

大家好哇，今天我们来用 css 来做一个平行四边形，这个问题是我之前面试中遇到的，当时只想到用skew()去进行一个扭曲斜向拉伸的效果，考虑的不是很全面，所以今天我们就来重新深入的聊一下制作平行四边形的相关的 css 知识。

实现过程

既然想到了利用 skew() 去做一个扭曲斜向拉伸的效果，我们就必须对这个属性有着一定的了解：

skew()定义了一个元素在二维平面上的倾斜转换，接收两个参数：
ax，表示用于沿横坐标扭曲元素的角度。
ay，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为 0，导致纯水平倾斜。

另外要特别提示一点：这个元素加给行内元素是不会生效的，同样的行内元素也不会继承这个属性值。

我们可以简单实现看一下：

    <style>        h1{            margin: 300px auto;            width: 200px;            height: 100px;            background-color: cornflowerblue;            color: bisque;            transition: all 3s;        }        h1:hover{            transform: skewX(-45deg);        }    </style>
    <h1>南极大冰块</h1>

复制代码

运行一下，实现效果如下：

变形是没问题了，可是里面的内容也跟着变形是怎么回事啊喂！

既然是把里面的内容也给扭曲了，那我直接把里面的内容再加个 skew() 给它扭回来~ 于是我三下五除二把代码改成了这样：

    <style>        div{            margin: 300px auto;            width: 200px;            height: 100px;            background-color:cornflowerblue;            transition: all 3s;        }        h1{            color: bisque;            transition: all 3s;        }        div:hover{            transform: skewX(-45deg);        }        div:hover h1{            transform: skewX(45deg);        }    </style>

    <div>        <h1>南极大冰块</h1>    </div>

复制代码

运行一下，实现效果如下：

看起来是没什么问题了，但是我们必须要在里面多加一个盒子包裹住所有内容才能解决问题，实在是太麻烦了，并且这个结构看起来也不太友好。如果回头要修改的时候，一眼看不出加了一层盒子包裹住元素到底是要干嘛。

那么，是不是还有更好的方法呢？没错，出场吧！万能的伪元素！！！

我们可以利用给伪元素添加属性 skew() 去做一个扭曲斜向拉伸的效果，这样扭曲的效果只会作用于这个伪元素，我们不必担心盒子内容也会被造成不必要的扭曲。只需要利用 position:absolute 使得伪元素完全继承主元素的宽高即可，如下代码：

    <style>        h1{            margin: 300px auto;            width: 200px;            height: 100px;            position: relative;            color: bisque;        }        h1::after{            content: '';            position: absolute;            top: 0;            left: 0;            right: 0;            bottom: 0;            background-color:cornflowerblue;            transition: all 3s;        }        h1:hover::after{            transform: skewX(-45deg);        }    </style>
    <h1>南极大冰块</h1>

复制代码

运行一下，实现效果如下：

哎哎哎~ 伪元素怎么把主元素内容给覆盖掉了？这就不得不提一句注意点了：伪元素生成的内容层级要比当前元素的层级高 ，同时当前元素的所有事件，伪元素也会被继承。

所以我们只要给伪元素添加一个 z-index: -1 即可~

    <style>        h1{            margin: 300px auto;            width: 200px;            height: 100px;            position: relative;            color: bisque;        }        h1::after{            content: '';            position: absolute;            top: 0;            left: 0;            right: 0;            bottom: 0;            background-color:cornflowerblue;            transition: all 3s;            z-index: -1;        }        h1:hover::after{            transform: skewX(-45deg);        }    </style>
    <h1>南极大冰块</h1>