使用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);
}