ホバーダブルトライアングルを作る方法は？

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

を使用することができる非常に幸せになりますa 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