当用户将鼠标悬停在每个链接上时,我试图将其作为背景:
小提琴:
https://jsfiddle.net/emils/8xgp602n/
形状的一般概念:
#flag {
width: 110px;
height: 56px;
padding-top: 15px;
position: relative;
background: red;
color: white;
font-size: 11px;
letter-spacing: 0.2em;
text-align: center;
text-transform: uppercase;
}
#flag:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 13px solid #eee;
border-left: 55px solid transparent;
border-right: 55px solid transparent;
}
如何使
#flag:after
部分位于每个列表项的中间? 最佳答案
由于border width doesn't support percentage values,您必须对菜单项使用固定宽度,例如:
/* USER LINKS */
.user-navigation {
position: absolute;
right: 0;
top: 0;
}
.user-navigation-list > li {
position: relative;
display: inline-block;
padding: 0 0 0 4px;
text-align: center;
}
.user-navigation-list > li:first-child,
.user-navigation-list > li:nth-child(2) {
padding-right: 7px;
}
.user-navigation-list > li > a {
padding: 0 9px 5px 9px;
color: #999;
display: inline-block;
font-size: 0.688em;
line-height: 31px;
letter-spacing: 0.4px;
text-decoration: none;
width: 72px;
}
.user-navigation-list > li > a:hover,
.user-navigation-list > li > a:active {
color: #fff;
background-color: #aecacc;
}
.user-navigation-list > li > a:hover:after,
.user-navigation-list > li > a:active:after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 0;
height: 0;
border-bottom: 10px solid white;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
}
<div class="user-navigation">
<ul class="user-navigation-list">
<li><a href="#">LIVE CHAT</a>
</li>
<li><a href="#">Currency £</a>
</li>
<li><a href="#">Sign In</a>
</li>
<li><a href="#">My Account</a>
</li>
<li><a href="#">My Gifts</a>
</li>
<li><a href="#">My Basket</a>
</li>
</ul>
</div>
关于html - 带有CSS标志形状背景的链接,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/41209488/