需求描述
想要实现标签右上角带有三角形角标的效果,且不希望使用图标或新建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变换
更多推荐
CSS:使用线性渐变实现标签右上角三角形角标效果/HTML上标、下标
发布评论