html - 如何制作悬停双三 Angular 形？

Question

像这样。所以'a'元素彼此相邻。并随着工作过渡。你知道如何实现吗？如果你至少给我一些链接，我会很高兴

Answer 1

您可以使用渐变在 background-color 之上绘制每个部分:

如果渐变不可用(较旧的浏览器)，您仍然可以使用背景来显示不同的状态。

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