事例:
实现一个规则的平行四边形
<div class="data-1">
<span class="text">数据分析二</span>
</div>
.data-1 {
transform: skewX(45deg);
background-color: #ffffff;
}
.text{
//字体不倾斜
display: inline-block;
transform: skewX(-45deg);
}
实现一个只有一边倾斜的平行四边形
<div class="data-1 data-l-s">
<span class="data-1"></span>
<span class="text">数据分析一</span>
</div>
.data-1 {
&.data-l-s {
width: 500px;
text-align: left;
margin-left: 37px;
}
background-color: #ffffff;
width: 300px;
transform: skewX(45deg);
text-align: center;
font-size: 18px;
margin-left: 20px;
.data-1 {
//位置可根据实际位置调整
position: absolute;
left: -45px;
top: 0;
height: 50px;
width: 50px;
background-color: #ffffff;
transform: skewX(-45deg);
}
.text{
display: inline-block;
transform: skewX(-45deg);
}
}