丑的不像话

最新推荐文章于 2024-11-12 09:23:25 发布

web_longboss

最新推荐文章于 2024-11-12 09:23:25 发布

阅读量325

点赞数

CC 4.0 BY-SA版权

分类专栏： CSS3 文章标签：丑

本文链接：https://blog.youkuaiyun.com/web_longboss/article/details/80831591

CSS3 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用CSS实现过期标签特殊倾斜显示的方法。通过对:before伪元素的巧妙应用，实现了带有倾斜角度的文字标签，增强了网页的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

丑的不像话

 .overdue {
    &:before{
      content: '过期';
      color: #ff7700;
      border: 1px solid #ff7f08;
      padding: 1px 4px;
      position: absolute;
      transform: rotate(-26deg) translateX(-4px) translateY(-3px);
      z-index:99;
      background: rgba(255,255,255,0.5);
      border-radius:2px;
    }
  }