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

南极一块修炼千年的大冰块
7,631 阅读4分钟

这是我参与更文挑战的第20天，活动详情查看： 更文挑战

前言

大家好哇，这个周末过的开心吗？美好的时光总时过的特别快，和朋友小聚，带狗子出去跑半天，周末就这么一眨眼没了。但是想到今天的日更大业还没完成，又充满了熬夜的干劲。

今天我们来用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>

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

GIF 2021-6-20 22-56-34.gif

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

既然是把里面的内容也给扭曲了，那我直接把里面的内容再加个 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>

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

GIF 2021-6-20 23-05-34.gif

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

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

我们可以利用给伪元素添加属性 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>

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

GIF 2021-6-20 23-21-51.gif

哎哎哎~ 伪元素怎么把主元素内容给覆盖掉了？这就不得不提一句注意点了：伪元素生成的内容层级要比当前元素的层级高 ，同时当前元素的所有事件，伪元素也会被继承。在之前的文章《如何控制css鼠标样式以及扩大鼠标点击区域 ｜ 周末学习》中，就是利用了这个属性达到点击扩大鼠标点击区域的效果。

所以我们只要给伪元素添加一个 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>

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

GIF 2021-6-20 23-25-03.gif

完美搞定一个平行四边形！！！同样的道理，如果要做圆形菱形什么的肯定也不在话下~

后记

今天是我坚持日更的第二十天，时间过得好快，更文不知不觉已经二十天了，这个周末也结束了~ 每天输出一点点，进步一点点。有志者，事竟成。大家一起加油呀~

如果本文对你有帮助，关注大冰块，点个赞吧~

更文挑战的文章目录如下：

avatar
文章
阅读
粉丝