需求描述
想要实现标签右上角带有三角形角标的效果，且不希望使用图标或新建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>
参考网址
[1] 菜鸟教程-CSS渐变
[2] 菜鸟工具–HTML/CSS/JS在线工具
[3] ElementUI-Badge标记
[4] HTML标签列表
[5] HTML上标-sup标签
[6] HTML下标-sub标签
[7] CSS-transform变换
