用svg画一个梯形角标

活不多说，直接上代码。

      <div class="status0" >
        <svg  class="rect" width="120px" height="200px">
          <polygon points="50,0 100,0 125,30 125,80 " class="pp"/>
        </svg>
          <div class="desc"></div>
      </div>

.status0{
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pp{
    fill:@blue-color;
 }
.desc {
  position: absolute;
  top:-4px;
  bottom: 0px;
  right: 4px;
  z-index: 100;
  color: #fff;
  }
  .desc::after {
    display: inline-block;
    content: '已售罄';
    transform: rotateZ(45deg);
    transform-origin: bottom left;
}
.rect {
    position: absolute;
    right: 0px;
    top:0px;
    overflow: hidden;
  }

作者：Vam的金豆之路

主要领域：前端开发

我的微信：maomin9761

微信公众号：前端历劫之路