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

某只杂鱼

已于 2023-07-31 16:58:09 修改

阅读量5.6k

点赞数 6

分类专栏：前端文章标签： css html HTML角标

于 2022-05-24 10:52:19 首次发布

本文链接：https://blog.csdn.net/qq_36604536/article/details/124942658

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

文章目录

需求描述

想要实现标签右上角带有三角形角标的效果，且不希望使用图标或新建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>

条状角标

最近又遇到一个角标相关的需求，本杂鱼感觉挺有意思，所以更新一哈：

使用渐变背景色和上标实现此条状角标效果，并用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>