我想让我的标签像这样,但没有得到如何做到这一点。
我也尝试了以下代码用于样本形状,但它没有来。
#demo:before {
border-width: 10px;
border-top-color: #ccc;
border-left-width: 50px;
border-right-width: 0;
left: 0;
}
#demo:after {
border-width: 2px;
border-top-color: #777;
border-left-width: 50px;
border-right-width: 0;
left: 0;
}
答案 0 :(得分:0)
您可以通过在a元素上添加after伪元素来完成此操作。
<ul>
<li><a class="active" href="#">Notifications</a></li>
<li><a href="#">Reports</a></li>
</ul>
ul {
padding: 0;
margin: 0;
box-sizing: border-box;
list-style-type: none;
background-color: blue;
float: left;
}
ul li {
float: left;
}
ul li + li {
border-left: 1px solid rgba(255, 255, 255, .5);
}
ul li a {
display: block;
color: #fff;
font-size: 14px;
text-decoration: none;
font-family: helvetica;
padding: 20px 16px;
position: relative;
}
ul li a.active:after {
content: "";
display: block;
background-color: #fff;
height: 10px;
position: absolute;
bottom: 0;
left: 16px;
right: 16px;
}
这是小提琴: