用svg畫(huà)一個(gè)梯形角標(biāo)

活不多說(shuō)，直接上代碼。

      <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的金豆之路

主要領(lǐng)域：前端開(kāi)發(fā)

我的微信：maomin9761

微信公眾號(hào)：前端歷劫之路