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打开新世界的大门~
Chrome调试流程
打开菜鸟教程翻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变换