如何制作悬停双三角？

Question

像这样。所以'a'元素相互毗邻。随着工作的转变。你知道它是如何实现的吗？如果你至少给我一些链接，我将非常高兴

Answer 1

您可以使用:before和:after伪元素

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>

Answer 2

您可以使用渐变在background-color：

之上绘制每个部分

如果渐变不可用（较旧的浏览器），您仍然有背景显示不同的状态。

＆＃13;

＆＃13;

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

＆＃13;

<nav><a href>LINK</a><a href class="active">ACTIVE HOVER STATE</a><a href>HOVER ME</a>
</nav>

＆＃13;

＆＃13;

＆＃13;

<强> codepen to play with