变换:skewX(-45deg)可以形成平行四边形。但是里面的内容也会跟着倾斜

解决方案:

嵌套元素方案:对内容再一次应用反向的歪斜()变形,从而抵消容器的变形效果缺点是不得不使用额外的HTML元素包裹内容 

div{
    transform: skewX(-45deg)
}
div>div{
    transform: skewX(45deg)
}

<div>
    <div>平行四边形</div>
</div>

伪元素方案:把所用样式(背景,边框)应用到伪元素上,对伪元素进行变形。

div{
	position: relative;
    /*文字颜色、内边距等样式*/
}
div:after{
	position: absolute;
	content: '';
	z-index: -1;/*堆叠层推到宿主元素后面,避免遮住内容*/
	background-color: yellow;
	left: 0;top: 0;bottom: 0;right: 0;
	transform: skew(-45deg);
}

伪元素方案还适用于其他任何变形样式,当我们想让一个元素变形而不想让他的内容变形式,就是用伪元素!

1.边框内圆角

div{
	display: inline-block;
	height: 50px;
	width: 160px;
	text-align: center;
	line-height: 50px;
	font-weight: bold;
	position: relative;
	border: 7px solid red;
}
div:after{
	position: absolute;
	content: '';
	z-index: -1;
	background-color: yellow;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
	border-radius: 17px;
}
div:before{
	position: absolute;
	content: '';
	z-index: -2;
	background-color: red;
	left: 0;
	top: 0;
	bottom: 0;
	right: 0;
}

 

 

 

 

Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐