Как сделать hover на двойном треугольнике?

ul,li {margin: 0; padding: 0; list-style-type: none;} 
a { color: white; text-decoration: none;} a:hover {color: #019CB2;} 
 
ul {display: block; width: 100%; height: 36px; line-height: 36px; background: #019CB2;} 
li {float: left; display: inline-block; padding: 0 20px; transition: all 0.5s; -webkit-clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%); clip-path: polygon(20% 0, 80% 0, 100% 50%, 80% 100%, 20% 100%, 0 50%);} 
li:hover {background: #FFE902;}

<ul> 
  <li><a href="">Link</a></li> 
  <li><a href="">Link</a></li> 
  <li><a href="">Link</a></li> 
</ul>

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>

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><a href="">Link</a></li> 
  <li><a href="">Link</a></li> 
  <li><a href="">Link</a></li> 
</ul>