1、代码
.box {
position: relative;
width: 100px;
height: 100px;
line-height: 100px;
text-align: center;
margin-left: 60px;
}
.box::after {
content: "";
background-color: rgb(22, 189, 189);
transform: skewX(-35deg);
z-index: -1;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
<div class="box">平行四边形</div>
2、运行结果
3、提示
(1)如果将旋转直接加在.box 上,文字也会随之旋转。所以可以用两层标签或者伪元素来实现。
(2)transform 该属性允许我们对元素进行旋转、缩放、移动或倾斜