CSS 实现圆角梯形

效果图

代码

• html

<div class="tag-wrapper">
  <div class="title-box">注意事项</div>
</div>

• css

.tag-wrapper {
  .title-box {
    position: relative;
    width: 1.20rem;
    height: 0.30rem;
    line-height: 0.27rem;
    text-align: center;
    color: #fff;
    font-size: 0.16rem;
    font-weight: bold;
    z-index: 0;
    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: -1;
      transform-origin: top left;
      background: $PRO_COLOR;
      transform: perspective(0.1rem) rotateX(-2deg);
      border-radius: 0.02rem 0.04rem 0.04rem 0.02rem;
    }
    &::after {
      content: '';
      position: absolute;
      right: -0.02rem;
      width: 0.04rem;
      height: 0.28rem;
      background-color: $PRO_COLOR;
      transform: rotate(23deg);
      border-radius: 0.02rem;
    }
  }
}