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



相关文章
使用markdown-it对markdown进行一个实时解析
# 引言 大家应该都接触过markdown笔记吧,我们常常见到很多能写文章的网页提供了一个实时的markdown解析的功能----即我们在一侧写下markdown语法,右边能够实时解析,并将解析后的markdown语法渲染到右侧页面上。非常炫酷实用,那么这是如何实现的呢?今天我们来一起探究一下。 # 开始 首先,我们这个演示学习在Vue3+TypeScript下使用的,所以我们预先建议准备一个Vue3+Typescript工程。 对于markdown的解析,我们可以使用`markdown-it`来进行解析。 比如,我们在左侧设置一个输入框,接收用户markdown输入,我们通过`ma
|
搜索推荐 JavaScript 前端开发
ESLint 禁止规则出现警告的 5 种方式
ESLint 禁止规则出现警告的 5 种方式
1359 0
|
11月前
|
存储 XML 人工智能
深度解读AI在数字档案馆中的创新应用:高效识别与智能档案管理
基于OCR技术的纸质档案电子化方案,通过先进的AI能力平台,实现手写、打印、复古文档等多格式高效识别与智能归档。该方案大幅提升了档案管理效率,确保数据安全与隐私,为档案馆提供全面、智能化的电子化管理解决方案。
840 48
|
JavaScript
Vue2走马灯扩展版(Carousel)
这篇文章介绍了如何在Vue 3框架中创建一个可自定义的走马灯(Carousel)组件,支持自动播放、导航、分页和响应用户交互等功能。
549 0
Vue2走马灯扩展版(Carousel)
|
12月前
|
IDE Java 开发工具
Java“未封闭的 String 表达式”怎么解决
要解决Java中的“未封闭的 String 表示”问题,需检查并修正字符串字面量,确保每个字符串被正确地用双引号括起来。若字符串跨越多行,可使用字符串连接操作符(+)或引入文本块(JDK 13 及以上版本)。这能帮助避免语法错误,并使代码更整洁易读。
407 7
|
前端开发
如何用SVG画一个特定边框(上)
如何用SVG画一个特定边框(上)
197 1
|
JavaScript
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
2479 0
Vue中 引入使用 vue-splitpane 实现窗格的拆分、调节
|
JavaScript
Vue 报错Failed to mount component: template or render function not defined
Vue 报错Failed to mount component: template or render function not defined
Vue 报错Failed to mount component: template or render function not defined
Markdown 拓展 - 对数学公式的支持
MathJax 和 LaTeX 数学公式 支持 MathJax 是一款运行在浏览器中的开源数学符号渲染引擎,使用MathJax可以方便的在浏览器中显示数学公式,不需要使用图片。目前,MathJax可以解析 Latex、MathML 和 ASCIIMathML 的标记语言。MathJax 项目于 2009 年开始,发起人有 American Mathematical Society, Design Science等,还有众多的支持者,个人感觉MathJax会成为今后数学符号渲染引擎中的主流,也许现在已经是了。本文接下来会讲述 MathJax 的基础用法,但不涉及MathJax 的安装及配置。
538 0
Markdown 拓展 - 对数学公式的支持
|
人工智能 JavaScript IDE
使用Coze工作流(二)
使用Coze工作流(二)
2062 0