CSS：使用线性渐变实现标签三角形角标效果/HTML上标、下标

需求描述

想要实现标签右上角带有三角形角标的效果，且不希望使用图标或新建div实现角标效果，效果如图：

实现思路

可以将标签右上角的三角形角标理解为与主体颜色不同的背景色，由此想到：可以使用线性渐变实现！哦，我真的好dio☆▽☆

参考代码

HTML

  
我是右上角带三角形角标的标签
  
右下角~
  
我是左下角带三角形角标的标签！
  
左上角..

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: line