transform: skewX(-45deg);
skewX --倾斜的角度
2-1 只让容器的形状倾斜,而保持其内容不变
1 应用一次反向的 skew() 变形
.xbox{
line-height: 100px;
text-align: center;
transform: skewX(45deg);
}
2 伪元素实现
.box::before{
width: 200px;
height: 100px;
content: "";
position: absolute;
top: 0;right: 0;left: 0;right: 0;
z-index: -1;
background: #58a;
transform: skewX(45deg);
}