用svg画一个梯形角标

简介: 用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;
  }



相关文章
|
3月前
|
前端开发
css 设置背景色渐变、字体颜色渐变
css 设置背景色渐变、字体颜色渐变
|
JSON 数据格式
Echarts统计图x轴实现拉伸滑动
Echarts统计图x轴实现拉伸滑动
127 1
|
8月前
|
前端开发 索引 容器
CSS 实现七彩圆环loading动画
CSS 实现七彩圆环loading动画
120 0
|
8月前
|
前端开发
CSS小技巧之绘制心形图案
CSS小技巧之绘制心形图案
115 0
|
前端开发 程序员
CSS重复线性渐变之画格子
CSS重复线性渐变之画格子
93 0
|
前端开发 容器
|
前端开发
CSS画圆、三角形、品字、骰子
CSS画圆、三角形、品字、骰子
161 0
|
前端开发
巧用 CSS 实现炫彩三角边框动画
巧用 CSS 实现炫彩三角边框动画
215 0
|
Android开发
autojs圆形波纹和方形波纹
牙叔教程 简单易懂
148 0