Marik Zuckor Marik Zuckor - 6 months ago 11
HTML Question

How to make hover double triangle?

enter image description here

like this. so 'a' elements adjoin to each other. And with work transition. Do you know how it to implement? i'll be very happy if you at least give me some link

Answer

you may use gradients to draw each parts on top of a background-color :

If gradients are not avalaible (older browser), you still have a background to show different state.

nav {
  background: #009EAC
}

a {
  display: inline-block;
  padding: 1em;
  color: white;
  font-weight: 900;
  text-shadow: 1px 1px 1px #333;
  text-decoration: none;
  background: linear-gradient(-250deg, #009EAC 0.5em, #009EAC 0.5em) top left no-repeat, linear-gradient(70deg, #009EAC 0.5em, #009EAC 0.5em) bottom left no-repeat, linear-gradient(250deg, #009EAC 0.5em, #009EAC 0.5em) top right no-repeat, linear-gradient(-70deg, #009EAC 0.5em, #009EAC 0em) bottom right no-repeat, linear-gradient(to bottom, rgba(255, 250, 0, 0), transparent) top left no-repeat;
  background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 80%;
  transition:background 0.5s;
}

a.active,
a:hover {
  background: linear-gradient(-250deg, #009EAC 0.5em, transparent 0.5em) top left no-repeat, linear-gradient(70deg, #009EAC 0.5em, transparent 0.5em) bottom left no-repeat, linear-gradient(250deg, #009EAC 0.5em, transparent 0.5em) top right no-repeat, linear-gradient(-70deg, #009EAC 0.5em, transparent 0.5em) bottom right no-repeat, linear-gradient(to bottom, rgba(255, 250, 0, 0.9), transparent) top left no-repeat;
  background-color: #EEB01F;
  background-size: 100% 50%, 100% 50%, 100% 50%, 100% 50%, 100% 80%;
}
<nav><a href>LINK</a><a href class="active">ACTIVE HOVER STATE</a><a href>HOVER ME</a>
</nav>

codepen to play with

Comments