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

本文链接：https://blog.csdn.net/ann295258232/article/details/97798040

有的时候某些列表需要标签突出，与其他列表的区别，可以用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画某个列表突出的标签

在这里插入图片描述