网络异常,图片无法展示
|
话不多说,直接上代码。
<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; }