带有 CSS 旗形背景的链接

Question

当用户将鼠标悬停在它上面时，我正在尝试为每个 link 制作这样的背景：

Fiddle: 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 部分位于每个列表项的中间？

Answer 1

自 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>

Answer 2

css 响应功能区

Svg 比 css 响应更快。
但是如果你想要一个带有 css 的响应式功能区，你可以使用渐变来使功能区响应：

.menu {} .menu a {
  display: inline-block;
  height: 50px;
  margin: 5px;
  padding: 0em 0.5em;
  background: linear-gradient(to bottom right, red 50%, transparent 50%), linear-gradient(to bottom left, red 50%, transparent 50%);
  background-repeat: no-repeat;
  background-size: 150% 100%, 150% 100%;
  background-position: left, right;
}

<div class="menu">
  <a href="#">Link</a>
  <a href="#">Longer Link</a>
  <a href="#">Lorem ipsum dollar si amet Longer Link</a>
</div>

带有 CSS 旗形背景的链接

Links with CSS flag shape background

html

css

alignment

css-shapes

css 响应功能区