用svg画一个梯形角标

怼烎@ 2021-08-13 23:53 496阅读 0赞

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]  
活不多说，直接上代码。

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZy5jc2RuLm5ldA_size_16_color_FFFFFF_t_70]: /images/20210813/7470a6a51dac45cdbb57ce6a96962dde.png

发表评论取消回复

表情：

评论列表（有 0 条评论，496人围观）

还没有评论，来说两句吧...

相关阅读

相关 CSS_画三角形和梯形

我们的思路是使用border边框来实现三角形的样式，因为border的边框是由四个三角形组成的。设置一个盒子模型 <!DOCTYPE html> <h

冷不防/ 2023年10月06日 17:46/ 0 赞/ 27 阅读

相关小程序tabBar右上角添加角标

小程序可以在 `pages.json` 中使用 `tabBar` 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页。关于 `tabBar` 的配置可以查看 [

墨蓝/ 2023年03月02日 05:19/ 0 赞/ 5 阅读

相关 Android TextView 右上角文字角标(TM, ©，® )

![实现效果][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

Love The Way You Lie/ 2023年01月02日 08:26/ 0 赞/ 4 阅读

相关 SVG线画如何实现

本文翻译自[CSS-TRICKS][]的站长CSS大牛CHRIS COYIER（同时也是Codepen的站长）的文章《[How SVG Line Animation Works

蔚落/ 2022年08月25日 05:25/ 0 赞/ 233 阅读

相关 css梯形、六角星、五角星、六边形

效果如图： ![Center][] 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

叁歲伎倆/ 2022年07月12日 11:39/ 0 赞/ 194 阅读

相关 css梯形、六角星、五角星、六边形

效果如图： ![Center][] 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

野性酷女/ 2022年07月12日 11:39/ 0 赞/ 171 阅读

相关 svg path 画圆

[https://www.cnblogs.com/guxuelong/p/7743736.html][https_www.cnblogs.com_guxuelong_p_774

小鱼儿/ 2022年01月07日 13:21/ 0 赞/ 369 阅读

相关使用SVG画一个罗盘

效果 ![在这里插入图片描述][20190803170641837.gif] 演示地址：[罗盘][Link 1] 项目地址：[svg绘制罗盘-github][sv

你的名字/ 2021年11月10日 18:48/ 0 赞/ 381 阅读

相关 css 三角角标样式

.sanjiao { width: 0px; height: 0px; overflow: hidden; border

男娘i/ 2021年09月14日 01:10/ 0 赞/ 616 阅读

相关用svg画一个梯形角标

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9tYW9taW4uYmxvZ

怼烎@/ 2021年08月13日 23:53/ 0 赞/ 497 阅读