admin管理员组文章数量:1794759
CSS：使用线性渐变实现标签三角形角标效果/HTML上标、下标
需求描述
想要实现标签右上角带有三角形角标的效果，且不希望使用图标或新建div实现角标效果，效果如图：
实现思路可以将标签右上角的三角形角标理解为与主体颜色不同的背景色，由此想到：可以使用线性渐变实现！哦，我真的好dio☆▽☆
代码： HTML： <div class="testContent"> <div class="mark1">我是右上角带三角形角标的标签</div> <div class="mark2">右下角~</div> <div class="mark3">我是左下角带三角形角标的标签！</div> <div class="mark4">左上角..</div> </div> CSS： .testContent { width: 280px; height: 240px; padding: 20px; background: #f0f5e3; } .testContent div { float: left; padding: 12px; color: #178b00; margin: 6px; border: 1px solid #169a03; } /* 这里只给出Chrome运行有效的渐变样式 */ .mark1 { /* 当渐变色起点设置为固定像素值时，角标大小不受标签div尺寸影响 */ background-image: linear-gradient(225deg, #8ca86d 8px, #e5eecc 8px); } .mark2 { /* 当渐变色起点设置为百分比时，角标大小会受到标签div尺寸影响 */ background-image: linear-gradient(315deg, #8ca86d 8%, #e5eecc 8%); } .mark3 { background-image: linear-gradient(45deg, #8ca86d 8%, #e5eecc 8%); } .mark4 { background-image: linear-gradient(135deg, #8ca86d 8px, #e5eecc 8px); } 在线运行可以拷贝到这里在线调试： 菜鸟工具–HTML/CSS/JS在线工具
HTML上标、下标今天翻ElementUI组件文档，看到了：Badge标记，F12打开新世界的大门~ 打开菜鸟教程翻HTML标签列表发现好多标签我到现在都不知道，看到了HTML上标-sup标签和HTML下标-sub标签，使用它们就能方便地实现角标效果啦~至于调整角标位移之类的，其实参考ElementUI角标的实现就能轻松做到，这里附上笔者的小demo（Emm…虽然说这个demo里的sup、sub标签换成div也不会影响显示效果就是-_-||）： 参考代码如下，可以拷贝到菜鸟教程角标的在线示例运行调试：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>上下左右角标示例</title> </head> <body> <div class="content"> 右上角标~<sup class="badge right-top">×</sup> </div> <div class="content"> 右下角标..<sub class="badge right-bottom">+1</sub> </div> <div class="content"> 左上角标！<sup class="badge left-top">new</sup> </div> <div class="content"> 左下角标_<sub class="badge left-bottom"></sub> </div> </body> <style type="text/css"> .content { position: relative; vertical-align: middle; display: inline-block; padding: 6px 10px; margin: 20px; color: #178b00; background: #f0f5e3; border: 1px solid #169a03; border-radius: 3px; } .badge { position: absolute; white-space: nowrap; display: inline-block; padding: 0 6px; background: #FC5531; color: snow; border-radius: 12px; height: 24px; line-height: 24px; font-size: 16px; text-align: center; } .right-top { right: 0; top: 0; padding: 0 5px; font-size: 20px; line-height: 20px; transform: translateX(50%) translateY(-50%); } .right-bottom { right: 0; bottom: 0; transform: translateX(50%) translateY(50%); } .left-top { left: 0; top: 0; transform: translateX(-50%) translateY(-50%) rotate(-24deg); } .left-bottom { left: 0; bottom: 0; height: 12px; transform: translateX(-50%) translateY(50%); } </style> </html> 条状角标最近又遇到一个角标相关的需求，本杂鱼感觉挺有意思，所以更新一哈： 使用渐变背景色和上标实现此条状角标效果，并用with-badge类控制是否有角标； 参考代码如下，可以拷贝到菜鸟教程角标的在线示例运行调试：
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>条状角标示例</title> </head> <body> <div class="content with-badge"> 条状角标 * v * <sup class="badge left-top">NEW</sup> </div> <div class="content"> 无角标 * _ * <sup class="badge left-top">NEW</sup> </div> </body> <style type="text/css"> .content { position: relative; vertical-align: middle; display: inline-block; padding: 32px; margin: 60px; color: #178b00; border: 1px solid #169a03; border-radius: 3px; background: #f0f5e3; } .badge { position: absolute; white-space: nowrap; display: inline-block; color: snow; font-size: 14px; } .left-top { left: 20px; top: 20px; transform: translateX(-50%) translateY(-50%) rotate(-45deg); } .content > sup { visibility: hidden; } .with-badge { background-image: linear-gradient(135deg, #f0f5e3 20px, #FC5531 20px, #FC5531 36px, #f0f5e3 36px); } .with-badge > sup { visibility: visible; } </style> </html> 参考网址[1] 菜鸟教程-CSS渐变 [2] 菜鸟工具–HTML/CSS/JS在线工具 [3] ElementUI-Badge标记 [4] HTML标签列表 [5] HTML上标-sup标签 [6] HTML下标-sub标签 [7] CSS-transform变换
版权声明：本文标题：CSS：使用线性渐变实现标签三角形角标效果HTML上标、下标 内容由林淑君副主任自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.xiehuijuan.com/baike/1686971510a123934.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论