【CSS】用CSS画某个突出列表的书签/标签

有的时候某些列表需要标签突出，与其他列表的区别，可以用CSS来实现，思路如下：

(1)通过border-width的不同方向来呈现出缺口三角，

水平方向：
父容器的height为伪类after的border-width的一半，缺口方向的边框颜色透明(border-right-color:transparent)，且它的相反方向即左边框宽度设置为0(border-left-width:0)

垂直方向：
同理可得，父容器的width为伪类after的border-width的一半，缺口方向的边框颜色透明(border-bottom-color:transparent)，且它的相反方向即上边框宽度设置为0(border-top-width:0)

(2)定位在最右侧(水平方向 left:100%)和最下侧(垂直方向 top:100%)

水平方向的标签核心代码如下：

/* S 水平方向的标签 */
.tag-horizontal {position: absolute;background: #00cd32;padding: 0 5px;display: flex;align-items: center;height: 26px;color: #fff;
}.tag-horizontal::after{content: "";position: absolute;left: 100%; top: 0;border-color: #00cd32 transparent #00cd32 #00cd32;border-width: 13px 13px 13px 0;border-style: solid;
}
/* E 水平方向的标签 */

垂直方向的标签核心代码如下：

/* S 垂直方向的标签 */
.tag-vertical {float: left;  /*水平方向放多个的设置*/margin-right: 2px; /*水平方向放多个的设置*/position: relative;padding: 5px 0;width: 26px;color: #fff;text-align: center;
}
.tag-vertical::after {position: absolute;content: "";left: 0;top: 100%;border-style: solid;border-width: 0 13px 13px 13px;
}  /*可设置不同颜色*/
.tag-vertical.discount::after {border-color: #00d9a9 #00d9a9 transparent #00d9a9;
}
.tag-vertical.discount {background: #00d9a9;
}/* E 垂直方向的标签 */

在线演示： CSS画某个列表突出的标签

【CSS】用CSS画某个突出列表的书签/标签相关推荐

php绘制一个三角形,如何利用css或html5画出一个三角形？两种不同的制作三角形方法（代码实例）...
我们在平时的前端开发的时候,有时候是需要一些小图形来丰富一下页面效果,比如:下拉列表的倒三角图形.那么这样的一个三角形是如何制作出来的,本章给大家介绍如何利用css或html画出一个三角形?两种不同的 ...
[css] 用css画一个太阳
[css] 用css画一个太阳 // css.sun {margin: 200px;width: 200px;height: 200px;border-radius: 50%;background: ...
[css] 用CSS画出一个任意角度的扇形，可以写多种实现的方法
[css] 用CSS画出一个任意角度的扇形,可以写多种实现的方法先画一个圆,外加两个绝对定位的半圆扇形可以通过两个半圆作为遮罩旋转来露出相应的角度实现这只能切出180°以内的扇形超过180°的 ...
[css] 使用css画出一个五角星
[css] 使用css画出一个五角星 #star-five {margin: 50px 0;position: absolute;display: block;color: red;width: 0; ...
[css] 使用css3画一个扇形
[css] 使用css3画一个扇形四个半圆叠加,过半调整 z-index .container { width: 200px; height: 200px; position: relative; ...
[css] 用css画一个五边形和一个六边形
[css] 用css画一个五边形和一个六边形五边形:clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%); 六边形:cli ...
[css] 用css3画出一个立体魔方
[css] 用css3画出一个立体魔方 <!DOCTYPE html> <html> <head><meta charset="utf-8" ...
[css] 用css画出一个圆圈，里面有个对号
[css] 用css画出一个圆圈,里面有个对号 #right {width: 150px;height: 150px;margin: 100px auto;border-radius: 50%;bor ...
[css] 用css画出一把刻度尺
[css] 用css画出一把刻度尺 <div class='ruler'><div class='cm'><div class='mm'></div>& ...

【CSS】用CSS画某个突出列表的书签/标签

【CSS】用CSS画某个突出列表的书签/标签相关推荐

最新文章

热门文章