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