CSS:使用线性渐变实现标签三角形角标效果/HTML上标、下标
2023-09-11 14:22:32 时间
需求描述
想要实现标签右上角带有三角形角标的效果,且不希望使用图标或新建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>
条状角标
最近又遇到一个角标相关的需求,本杂鱼感觉挺有意思,所以更新一哈:
使用渐变背景色和上标实现此条状角标效果,并用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>
参考网址
[1] 菜鸟教程-CSS渐变
[2] 菜鸟工具–HTML/CSS/JS在线工具
[3] ElementUI-Badge标记
[4] HTML标签列表
[5] HTML上标-sup标签
[6] HTML下标-sub标签
[7] CSS-transform变换
相关文章
- html,css,js,jquery
- Why are dashes preferred for CSS selectors / HTML attributes?
- html table表格导出excel的方法 html5 table导出Excel HTML用JS导出Excel的五种方法 html中table导出Excel 前端开发 将table内容导出到excel HTML table导出到Excel中的解决办法 js实现table导出Excel,保留table样式
- Html超级链(A标签)实现按钮效果的五种方法(综合实例)
- 【Css/html】通过【视口mata】解决移动端网页规范问题
- 【CSS】css弹出菜单设置示例
- 【前端学习之HTML&CSS进阶篇】-- HTML第四篇 -- 美化表单
- 【前端学习之HTML&CSS】 -- 视觉格式化模型之一 常规流练习
- Day9:html和css
- Day4:html和css
- 【HTML】网页端脚本执行
- 《网页设计与前端开发 Dreamweaver+Flash+Photoshop+HTML+CSS+JavaScript 从入门到精通》——2.4 网页的主体标记body
- 《HTML CSS JavaScript 网页制作从入门到精通 第3版》—— 1.1 HTML的基本概念
- 《Web前端开发精品课 HTML与CSS进阶教程》——2.8 HTML5舍弃的标签
- 《HTML与CSS入门经典(第8版)》——1.7 问与答
- 基于HTML+CSS+JavaScript实现静态高校智慧学习平台【100010237】
- html中offsetTop、clientTop、scrollTop、offsetTop各属性
- 有趣的HTML实例(九) 文本变形动画(css+js)
- esModule的模块加载在普通html中使用
- 用HTML CSS JS 实现一个工作招聘平台展示响应式网站
- Web网站模板-小清新企业个人营销宣传响应式网站模板(HTML+CSS+JavaScript)
- 8Web网站模板-汽车官网产品介绍响应式网站模板(HTML+CSS+JavaScript)
- CSS学习知识整理(二)Css 背景
- css+html+js实现多级下拉和弹出菜单