How to make hover double triangle? - html

Question

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 1

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

Answer 2

You can use :before and :after pseudo elements
ul {
padding: 0;
list-style-type: none;
display: flex;
background: #019CB2;
}
a {
text-decoration: none;
color: white;
}
li {
padding: 10px 20px;
margin: 0 10px;
position: relative;
transition: all 0.3s ease-in;
}
li:after,
li:before {
content: '';
top: 0;
position: absolute;
transition: all 0.3s ease-in;
width: 0;
height: 0;
}
li:before {
left: 0;
border-style: solid;
border-width: 20px 10px 20px 0;
border-color: transparent #019CB2 transparent transparent;
transform: translateX(-100%);
}
li:after {
right: 0;
border-style: solid;
border-width: 20px 0 20px 10px;
border-color: transparent transparent transparent #019CB2;
transform: translateX(100%);
}
li:hover {
background: #FFE902;
}
li:hover:after {
border-color: transparent transparent transparent #FFE902;
}
li:hover:before {
border-color: transparent #FFE902 transparent transparent;
}
<ul>
<li>Link</li>
<li>Link</li>
<li>Link</li>
</ul>