css画出带圆角平行四边形效果
使用css画出平行四边形效果如下图
HTML代码
<div class="badge">
<span>营业中</span>
</div>关键代码：
transform: skewX(-15deg); /* 让元素倾斜，形成平行四边形的视觉效果 */如果倾斜的元素里面需要放文字，需要把文字反向倾斜一下，否则文字也会跟着元素变形
transform: skewX(15deg);
实现代码：
.badge {
height: 36rpx;
display: flex;
justify-content: center;
align-items: center;
padding: 4rpx 14rpx;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 500;
font-size: 20rpx;
color: #603008;
background: linear-gradient( 267deg, #FFC070 0%, #FFDBAD 100%);
/* 让元素倾斜，形成平行四边形的视觉效果 */
transform: skewX(-15deg);
border-radius: 8rpx;
line-height: 23rpx;
box-sizing: border-box;
}
/* 文字需要反向倾斜，防止变形 */
.badge span {
display: inline-block;
transform: skewX(15deg);
}