Search code examples
htmlcssalignmentcss-shapes

Links with CSS flag shape background

I am trying to make something like this as background for each link when user hovers mouse over it:

enter image description here

Fiddle: https://jsfiddle.net/emils/8xgp602n/

General idea of shape:

#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;
}

How do I make it that #flag:after part is in middle of each list item?

Solution

  • Since border width doesn't support percentage values, you will have to use a fixed width for your menu items, e.g. like this:

    /* 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>