使用css画出平行四边形效果如下图
HTML代码
<div class="badge"><span>营业中</span>
</div>关键代码：
css">transform: skewX(-15deg); /* 让元素倾斜，形成平行四边形的视觉效果 */如果倾斜的元素里面需要放文字，需要把文字反向倾斜一下，否则文字也会跟着元素变形
css">transform: skewX(15deg);
实现代码：
css">.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);
}
