質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

3556閲覧

cssの図形を合成することはできる?

EXIT

総合スコア43

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

Webサイト

一つのドメイン上に存在するWebページの集合体をWebサイトと呼びます。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

1グッド

2クリップ

投稿2019/02/24 04:55

問題

重なり
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}

よろしくお願いします。

bochan2👍を押しています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

yoshinavi

2019/02/25 05:19

>重なっている部分が目立ちます。 → どこの部分ですか?
EXIT

2019/02/25 15:56

⊿□ ↑この重なり部分です。 なお、この質問は解決したので大丈夫です。また解決法を書こうと思います。
guest

回答1

0

ベストアンサー

質問頂きありがとうございます。
こちらに解決法が書いてあるので、読んでみてはいかがでしょうか
https://stackoverflow.com/questions/8746860/how-to-handle-double-opacity-of-two-overlapping-divs

投稿2019/03/04 10:25

編集2019/03/04 13:14
bochan2

総合スコア2050

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

EXIT

2019/03/15 09:13

ありがとうございます! すみません、通知を見逃していました^^;
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問