css中skew实现元素倾斜

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

skew语法

skew语法：

skew(ax, ay)

其中：

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

x轴倾斜

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

<!-- 要旋转的div -->
<div class="box"></div>
<!-- 参照物 -->
<div class="box"></div>
<style type="text/css">
	.box {
		width: 100px;
		height: 100px;
		background-color: steelblue;
		margin: 10px 100px;
	}

<blockquote>
	.box:nth-of-type(1) {}
</blockquote>

	.box:nth-of-type(2) {
		/* x轴上倾斜30deg */
		transform: skew(30deg, 0);
	}
</style>

运行效果：

css中skew实现x轴倾斜

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

y轴倾斜

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

<!-- 要旋转的div -->
<div class="box"></div>
<!-- 参照物 -->
<div class="box"></div>
<style type="text/css">
	.box {
		width: 100px;
		height: 100px;
		background-color: steelblue;
		margin: 50px 100px;
	}

<blockquote>
	.box:nth-of-type(1) {}
</blockquote>

	.box:nth-of-type(2) {
		/* x轴上倾斜30deg */
		transform: skew(0, 30deg);
	}
</style>

运行效果：

css中skew实现y轴倾斜

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

x和y轴倾斜

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

<!-- 要旋转的div -->
<div class="box"></div>
<!-- x旋转30deg的div -->
<div class="box"></div>
<!-- y旋转30deg的div -->
<div class="box"></div>
<!-- x和y旋转30deg的div -->
<div class="box"></div>
<style type="text/css">
	body {
		padding: 0 35%;
	}

	.box {
		width: 100px;
		height: 100px;
		background-color: steelblue;
		display: inline-block;

		margin: 30px 20px;
	}

<blockquote>
	.box:nth-of-type(1) {}
</blockquote>

	.box:nth-of-type(2) {
		/* x轴上倾斜30deg */
		transform: skew(30deg, 0);
	}

	.box:nth-of-type(3) {
		/* y轴上倾斜30deg */
		transform: skew(0, 30deg);
	}

	.box:nth-of-type(4) {
		/* x和y轴上倾斜30deg */
		transform: skew(30deg, 30deg);
	}
</style>

运行效果：

css中skew实现x和y轴倾斜

实务应用

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

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

<!-- 要旋转的div -->
<div class="triangle rounded"></div>
<style type="text/css">
	.triangle {
	    position: absolute;
	    left: 50%;
	    top: 50%;
	    background-color: steelblue;
	    text-align: left;
	}
	.triangle:before,
	.triangle:after {
	    content: '';
	    position: absolute;
	    background-color: inherit;
	}
	.triangle,
	.triangle:before,
	.triangle:after {
	    width: 8em;
	    height: 8em;
	    border-top-right-radius: 30%;
	}
	.triangle {
			/* 2d 变换 */
	    transform: translate(-50%, -50%) rotate(-60deg) skewX(-30deg) scale(1, .866);
	}
	.triangle:before {
			/* 2d 变换 */
	    transform: rotate(-135deg) skewX(-45deg) scale(1.414, .707) translate(0, -50%);
	}
	.triangle:after {
			/* 2d 变换 */
	    transform: rotate(135deg) skewY(-45deg) scale(.707, 1.414) translate(50%);
	}
</style>

运行效果：

css画圆角三角形

参考链接

如何利用纯css画出一个三个角都是圆角的三角形? https://www.zhihu.com/question/507186160/answer/2281529296
mdn skew： https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform-function/skew()

转载请注明：快乐编程 » css中skew实现元素倾斜