問題
CSSで2つ重ねた図形を書きました。
半透明なため、重なっている部分が目立ちます。
ホバー時にはこのように半透明になるようにしたいのですが、図形の合成みたいなことってできるのでしょうか?
(なぜか2つの図形のtransition
の終わりが違うのも気になる…)
試したこと
overflow: hidden;
で重なり部分が消せるかと思ったが、斜めカット部の方がなくなってしまったのと、:before
要素には適用できなかった。
コード
html
1<header> 2 <nav> 3 <ul> 4 <li class="111"> 5 <a href=""> 6 111 7 </a> 8 </li> 9 <li class="222"> 10 <a href=""> 11 222 12 </a> 13 </li> 14 <li class="333"> 15 <a href=""> 16 333 17 </a> 18 </li> 19 <li class="444"> 20 <a href=""> 21 444 22 </a> 23 </li> 24 <li class="current"> 25 <a href=""> 26 555 27 </a> 28 </li> 29 </ul> 30 </nav> 31</header>
css
1html { font-size: 62.5%; } 2 3header ul { 4 display: flex; 5 align-items: center; 6 flex-wrap: wrap; 7 overflow: hidden; 8 width: 100%; 9 margin-bottom: -1px; 10} 11header li { 12 font-size: 1.5rem; 13 height: 4.5rem; 14 padding-left: .4rem; 15} 16header li:first-child { 17 padding-left: 1.5rem; 18} 19header li:last-child { 20 padding-right: .5rem; 21} 22header li > a { 23 text-decoration: none; 24 display: block; 25 padding: 1rem 2rem; 26 height: 100%; 27 color: #fff; 28 outline: none; 29 transition: background-color 0.2s ease-out, border-color 0.2s ease-out; 30 position: relative; 31 border-radius: 9px 5px 0 0; 32} 33 34/* ここから */ 35header li > a:hover { /* 右側の四角の部分 */ 36 background-color: rgba(255, 255, 255, 0.4); 37 border-color: rgba(255, 255, 255, 0.4); 38 transition: background-color 0.3s ease-in, border-color 0.3s ease-in; 39 box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.8); 40} 41header li > a:hover::before { /* 左側の斜めカットの部分 */ 42 background-color: rgba(255, 255, 255, 0.4); 43 border-color: rgba(255, 255, 255, 0.4); 44 transition: background-color 0.3s ease-in, border-color 0.3s ease-in; 45 box-shadow: -2px 2px 2px rgba(0, 0, 0, 0.4); 46} 47header li > a::before { /* 左側の斜めカットの部分 */ 48 content: ''; 49 position: absolute; 50 z-index: 1; 51 top: 0; 52 left: -.4rem; 53 bottom: 0; 54 width: 1rem; 55 transition: background-color 0.3s ease-in; 56 transform: skew(-15deg); 57 border-radius: 5px 0 0 0; 58}
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー