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

欢迎关注我的公众号「前端历劫之路」 ​

回复关键词电子书，即可获取近12本前端热门电子书。 ​

回复关键词红宝书第4版，即可获取最新《JavaScript高级程序设计》（第四版）电子书。 ​

你还可以加我微信，我拉拢了很多IT大佬，创建了一个技术交流、文章分享群，欢迎你的加入。 ​

• 作者：Vam的金豆之路

• 主要领域：前端开发

• 我的微信：maomin9761

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

​