书签 css

1.水平书签

/* 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- 13px 13px 13px 0;
  border-style: solid;         
}
/* E 水平方向的标签 */

　　

2.垂直书签

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

/*可设置不同颜色*/
.tag-vertical.discount::after {
    border-color: #00d9a9 #00d9a9 transparent #00d9a9;
}    
.tag-vertical.discount {
    background: #00d9a9;
}

　　

来自：https://blog.csdn.net/ann295258232/article/details/97798040