顶角贴纸效果

た入场券 2023-07-18 15:29 7阅读 0赞

有时候我们会有这样的需求，在一个列表展示页面，有一些列表项是新添加的、或者热度比较高的，就会要求在其上面添加一个贴纸效果的小条  
![在这里插入图片描述][20200329144245977.png]

<div class="wrap">
      <div class="ribbon">
        < a href=" ">Fork me on GitHub</ a>
      </div>
    </div>

/\* 样式设置 \*/

.wrap { 
      width: 160px;
      height: 160px;
      overflow: hidden;
      position: relative;
      background-color: #f3f3f3;
    }
    
    .ribbon { 
      background-color: #a00;
      overflow: hidden;
      white-space: nowrap;
      position: absolute;
      /* shadom */
      -webkit-box-shadow: 0 0 10px #888;
      -moz-box-shadow: 0 0 10px #888;
      box-shadow: 0 0 10px #888;
      /* rotate */
      -webkit-transform: rotate(-45deg);
      -moz-transform: rotate(-45deg);
      -ms-transform: rotate(-45deg);
      -o-transform: rotate(-45deg);
      transform: rotate(-45deg);
      /* position */
      left: -50px;
      top: 40px;
    }
    
    .ribbon a { 
      border: 1px solid #faa;
      color: #fff;
      display: block;
      font: bold 81.25% "Helvetica Neue", Helvetica, Arial, sans-serif;
      margin: 1px 0;
      padding: 10px 50px;
      text-align: center;
      text-decoration: none;
      /* shadow */
      text-shadow: 0 0 5px #444;
    }

[20200329144245977.png]: /images/20230528/c8ad2b969c2a4b6d9ba9e7cc6ea3b27f.png

发表评论取消回复

表情：

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

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

相关阅读

相关 Java实现 LeetCode 691 贴纸拼词（DFS+map记录）

691. 贴纸拼词我们给出了 N 种不同类型的贴纸。每个贴纸上都有一个小写的英文单词。你希望从自己的贴纸集合中裁剪单个字母并重新排列它们，从而拼写出给定的目标字符串

逃离我推掉我的手/ 2023年07月22日 10:27/ 0 赞/ 1 阅读

相关顶角贴纸效果

有时候我们会有这样的需求，在一个列表展示页面，有一些列表项是新添加的、或者热度比较高的，就会要求在其上面添加一个贴纸效果的小条 ![在这里插入图片描述][202003291

た入场券/ 2023年07月18日 15:29/ 0 赞/ 8 阅读

相关 android 动态贴纸,萌拍动态贴纸相机软件下载

萌拍动态贴纸相机软件是一款以贴纸为元素的美颜版动态相机app，对于不少爱美的妹纸们来说是不错的软件，简单操作，海量贴纸选择，尽情展现你的美。萌态动图制作就是这么简单！感兴趣的小

绝地灬酷狼/ 2022年10月17日 15:55/ 0 赞/ 147 阅读

相关 691 贴纸拼词（记忆化搜索、状态压缩dp）

1. 问题描述：我们给出了 N 种不同类型的贴纸。每个贴纸上都有一个小写的英文单词。你希望从自己的贴纸集合中裁剪单个字母并重新排列它们，从而拼写出给定的目标字符串 targ

约定不等于承诺〃/ 2022年09月03日 08:26/ 0 赞/ 178 阅读

相关纯CSS实现3D折纸效果

今天继续来看一个纯CSS实现的[3D折纸效果][3D]，效果如下图。基于上一个效果《纯CSS实现图像3D悬停效果》而开发的，没有看过的童鞋欢迎[移步][Link 1]。本效

野性酷女/ 2022年08月25日 05:17/ 0 赞/ 345 阅读

相关提高敏捷回顾效果的小贴士

提高敏捷回顾效果的小贴士作者 Mark Levison译者张晓庆【整理】：Ackarlix 《敏捷回顾: 让团队从优秀到卓越》的作者之一[Esther Derb

墨蓝/ 2022年08月24日 06:23/ 0 赞/ 188 阅读

相关问题：贴友关于CSS效果的实现

今日在百度贴吧中，一贴有提出如下问题： ![SouthEast][] 对于这个问题，咱们贴上代码看效果 1: <html> 2: <head>

叁歲伎倆/ 2022年08月12日 00:18/ 0 赞/ 91 阅读

相关折纸问题

![20180401104610859][] 求解思路: ![20180401104631167][] //折纸问题 public cla

素颜马尾好姑娘i/ 2022年05月28日 07:27/ 0 赞/ 181 阅读

相关 Android简单实现嘴唇贴纸功能

大家新年快乐！！过年总是这么短暂，新年新气象，这篇文章本年年前准备发的，过年嘛，总会懒一些，哈哈哈哈。今天我们来简单实现一个嘴唇的贴纸功能，先看看效果。 ![在这里插入图片

女爷i/ 2022年03月20日 09:20/ 0 赞/ 211 阅读

相关纸飞机刷新页面

![20190509174332677.gif][] [20190509174332677.gif]: /images/20220203/c9b799d187104c8d9

「爱情、让人受尽委屈。」/ 2022年02月03日 14:49/ 0 赞/ 215 阅读