css中skew实现元素倾斜

css中可以用transform可以实现元素2D、3D的一些变化，其中有一个变化倾斜可以用skew实现。

skew语法

skew语法：

1skew(ax, ay)

其中：

11. ax 表示在x轴上的倾斜角度，单位为 deg。
22. ay 表示在y轴上的倾斜角度，单位为 deg。

x轴倾斜

示例1，x轴上倾斜30deg：

1<!-- 要旋转的div -->
2<div class="box"></div>
3<!-- 参照物 -->
4<div class="box"></div>
5<style type="text/css">
6    .box {
7        width: 100px;
8        height: 100px;
9        background-color: steelblue;
10        margin: 10px 100px;
11    }
12
13    .box:nth-of-type(1) {}
14
15    .box:nth-of-type(2) {
16        /* x轴上倾斜30deg */
17        transform: skew(30deg, 0);
18    }
19</style>

运行效果：

红色是辅助线，标明旋转的方向，是沿着x轴倾斜。

y轴倾斜

示例2，y轴上倾斜30deg：

1<!-- 要旋转的div -->
2<div class="box"></div>
3<!-- 参照物 -->
4<div class="box"></div>
5<style type="text/css">
6    .box {
7        width: 100px;
8        height: 100px;
9        background-color: steelblue;
10        margin: 50px 100px;
11    }
12
13    .box:nth-of-type(1) {}
14
15    .box:nth-of-type(2) {
16        /* x轴上倾斜30deg */
17        transform: skew(0, 30deg);
18    }
19</style>

运行效果：

红色是辅助线，标明旋转的方向，是沿着y轴倾斜。

x和y轴倾斜

示例3，x和y轴各旋转30度。

1<!-- 要旋转的div -->
2<div class="box"></div>
3<!-- x旋转30deg的div -->
4<div class="box"></div>
5<!-- y旋转30deg的div -->
6<div class="box"></div>
7<!-- x和y旋转30deg的div -->
8<div class="box"></div>
9<style type="text/css">
10    body {
11        padding: 0 35%;
12    }
13
14    .box {
15        width: 100px;
16        height: 100px;
17        background-color: steelblue;
18        display: inline-block;
19
20        margin: 30px 20px;
21    }
22
23    .box:nth-of-type(1) {}
24
25    .box:nth-of-type(2) {
26        /* x轴上倾斜30deg */
27        transform: skew(30deg, 0);
28    }
29
30    .box:nth-of-type(3) {
31        /* y轴上倾斜30deg */
32        transform: skew(0, 30deg);
33    }
34
35    .box:nth-of-type(4) {
36        /* x和y轴上倾斜30deg */
37        transform: skew(30deg, 30deg);
38    }
39</style>

运行效果：

实务应用

上次在知乎上看到一个问题，就是如何画一个圆角的三角形？其实就是用 transform 变换实现的，其中包括了 旋转、倾斜（skew）等。

思路：3个div设置倾斜角度、旋转，设置圆角，然后用before和after伪元素代替2个div。

1<!-- 要旋转的div -->
2<div class="triangle rounded"></div>
3<style type="text/css">
4    .triangle {
5        position: absolute;
6        left: 50%;
7        top: 50%;
8        background-color: steelblue;
9        text-align: left;
10    }
11    .triangle:before,
12    .triangle:after {
13        content: '';
14        position: absolute;
15        background-color: inherit;
16    }
17    .triangle,
18    .triangle:before,
19    .triangle:after {
20        width: 8em;
21        height: 8em;
22        border-top-right-radius: 30%;
23    }
24    .triangle {
25            /* 2d 变换 */
26        transform: translate(-50%, -50%) rotate(-60deg) skewX(-30deg) scale(1, .866);
27    }
28    .triangle:before {
29            /* 2d 变换 */
30        transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
31    }
32    .triangle:after {
33            /* 2d 变换 */
34        transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
35    }
36</style>

运行效果：

参考链接

如何利用纯css画出一个三个角都是圆角的三角形? https://www.zhihu.com/question/507186160/answer/2281529296

mdn skew： https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skew()