关于我该怎么做的任何建议?
div {
position: relative;
background-color: #008000;
padding: 0px 16px;
height: 40px;
line-height: 40px;
display: inline-block;
color: white;
border: 2px solid black;
border-right: none;
z-index: 1;
margin-right: -5px;
}
div:before {
content: '';
position: absolute;
left: 100%;
z-index: -1;
width: 28px;
height: 28px;
background-color: #008000;
border-right: 2px solid black;
border-bottom: 2px solid black;
transform: rotate(-45deg) translate(-14px, -7px);
}
<div>arrow with border</div>
<div>arrow with border</div>
<div>arrow with border</div>
最佳答案
希望这对您有所帮助。
ul {
margin: 20px 60px;
}
ul li {
display: inline-block;
height: 30px;
line-height: 30px;
width: 100px;
margin: 5px 1px 0 0;
text-indent: 35px;
position: relative;
}
ul li:before {
content: " ";
height: 0;
width: 0;
position: absolute;
left: -2px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent white;
z-index: 0;
}
ul li:first-child:before {
border-color: transparent;
}
ul li a:after {
content: " ";
height: 0;
width: 0;
position: absolute;
right: -15px;
border-style: solid;
border-width: 15px 0 15px 15px;
border-color: transparent transparent transparent darkgray;
z-index: 10;
}
ul li.active a {
background: green;
z-index: 100;
}
ul li.active a:after {
border-left-color: green;
}
ul li a {
display: block;
background: darkgray;
text-decoration: none;
}
ul li a:hover {
background: blue;
color: white;
}
ul li a:hover:after {
border-color: transparent transparent transparent blue;
}
<ul>
<li><a href="#">Foobar</a></li>
<li class="active"><a href="#">Foobar</a></li>
<li><a href="#">Foobar</a></li>
<li><a href="#">Foobar</a></li>
</ul>
关于html - 如何在之前添加z-index?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45877082/