当用户将鼠标悬停在每个链接上时,我试图将其作为背景:
html - 带有CSS标志形状背景的链接-LMLPHP
小提琴:
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/

10-10 23:17
查看更多