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



相关文章
|
5月前
|
前端开发
css实现伪类三角形气泡框 带边框
css实现伪类三角形气泡框 带边框
49 3
|
4月前
|
移动开发 前端开发 HTML5
HTML5 Canvas中实现绘制一个像素宽的细线
HTML5 Canvas中实现绘制一个像素宽的细线
51 3
|
3月前
|
前端开发
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
如何在页面中画一个canvas,然后在居中位置写上蓝色‘Hello Canvas‘,并加上文字描边 * @type {HTMLElement}
|
5月前
|
前端开发
CSS小技巧之绘制心形图案
CSS小技巧之绘制心形图案
80 0
|
11月前
|
前端开发
CSS实现鼠标悬停图片向上浮动,放大,翻转
CSS实现鼠标悬停图片向上浮动,放大,翻转
258 0
|
前端开发 程序员
CSS重复线性渐变之画格子
CSS重复线性渐变之画格子
67 0
|
前端开发 JavaScript
三角形用 CSS 该怎么画?那好看一点的三角形能画吗?
用css画三角形网上一找一大堆,大多数都是使用border来画的,优点是简单,缺点是单调,那么今天我就来带大家使用css花式画三角形。
136 0
三角形用 CSS 该怎么画?那好看一点的三角形能画吗?
|
前端开发 容器
|
前端开发
CSS——正方体360°旋转动画 效果
正方体360°旋转动画 效果
119 0