css实现平行四边形等特殊形状 文字图片倾斜

实现方法：CSS属性transform: skew(x,y)

skew() 函数定义了一个元素在二维平面上的倾斜转换。指定一个或两个参数，它们表示在每个方向上应用的倾斜量。
这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

语法： transform:skew(x,y);

通俗的讲，两个参数分别表示X轴和Y轴倾斜的角度，如果第二个参数为空，则默认为0。参数为正表示顺时针倾斜，参数为负表示向相反方向（逆时针）倾斜。
skewX(<angle>);表示只在X轴(水平方向)倾斜。
skewY(<angle>);表示只在Y轴(垂直方向)倾斜。

示例

1.X轴倾斜，Y轴不倾斜 transform:skew(ax) == transform:skewX(ax)

	transform: skew(30deg);
	transform: skewX(30deg);

实现效果：

2.X轴不倾斜，Y轴倾斜 transform:skewY(ay)

	transform: skewY(15deg);

实现效果：

3.X轴、Y轴都倾斜 transform:skew(ax,ay)

	transform: skew(30deg,15deg);

实现效果：

兼容：

div {
    
    
	transform: skew(30deg,20deg);
	-ms-transform: skew(30deg,20deg); /* IE 9 */
	-webkit-transform: skew(30deg,20deg); /* Safari and Chrome */
}

实例

1.编写一个平行四边形，里面的文字不倾斜。
当我们给父元素设置了倾斜，那么父元素及其包含的子元素都会倾斜。如果想要父元素倾斜，子元素不倾斜，那么给子元素设置负数值即可。

	<div class="box"> 
		<div>哈哈哈哈哈哈哈</div>
	</div>

.box {
    
    
    width:200px;
    height:30px;
    transform: skew(30deg);
    background:pink;
}

.box div {
    
    
    font-size: 16px;
    line-height: 30px;
    text-align: center;
    transform: skew(-30deg);
}

实现效果：

如果对你有所帮助，请记得一键三联哦