我能想到一个解决方案,但需要对DOM进行轻微修改.解决方案是将链接文本包装在< span>内.元素,然后我们将使用旋转的矩形代替三角形的边框.但是,由于背景必须在z-index中高于旋转的矩形,因此需要嵌套(因此我们在< span>元素上声明蓝色背景.
由于只有两个伪元素可能,并且您已经同时使用:: before和:: after作为样式目的,我们只能使用额外的嵌套级别:
InsertHTML
InsertHTML
InsertHTML
对于CSS(注意:您可能希望将供应商前缀添加到CSS转换属性):
.tag {
font-family: Helvetica, Arial, sans-serif;
display: inline-block;
color: #fff;
position: relative;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
margin: 0 30px 0 0;
text-decoration: none;
}
/* The rotated square */
.tag::after {
background-color: #588fe5;
display: block;
height: 27px;
width: 27px;
position: absolute;
top: 6px;
right: -13px;
content: "";
transform: rotate(45deg);
z-index: 1;
}
/* Nested span */
.tag > span {
display: inline-block;
background-color: #588fe5;
position: relative;
padding: 10px;
z-index: 2;
}
/* The white dot */
.tag > span::before {
background: #fff;
width: 10px;
height: 10px;
content: "";
display: inline-block;
border-radius: 20px;
margin: 0 5px 0 0;
}
/* Hover effects */
.tag:hover::after, .tag:hover > span {
background-color: #739fe4;
}
/* Active tag */
.tag.active, .tag.active::after {
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05) inset, 0px 0px 8px rgba(255, 252, 14, 0.6);
}