Q&A
実現したいこと
webサイトの背景と画像の間に台形の形の図形を入れたい
(CSSで背景の上に台形を作成して、更にその上に画像を置きたい)
前提
・webサイトのメインビジュアルの背景は一色
・その背景に1つ大きな台形の図形を入れたい。(横幅700px程度、縦はMVの高さ100%に)
・上記でできたものの上にMVなので人物の写真を設置したい
上:人物の写真(mv.png)
真ん中:台形
下:背景色
上記の三重構造にしたいが、台形が一番上に表示されてしまう。
現状↓
上:台形
真ん中:人物の写真(mv.png)
下:背景色
台形が人物の写真(mv.png)より前に表示されてしまう
該当のソースコード
html1
1 <section id="mv"> 2 <div class="mv"> 3 <img src="img/mv.png" width="" alt="" /> 4 </div> 5 </div> 6 </section>
css1
1#mv { 2 max-width: 100%; 3 height: 500px; 4 background: #87e5fc; 5 position: relative; 6} 7#mv::before { 8 content: ""; 9 position: absolute; 10 width: 700px; 11 height: 100%; 12 border-top: 500px solid #bdf1fe; 13 border-left: 100px solid transparent; 14 border-right: 100px solid transparent; 15 box-sizing: border-box; 16 left: 100; 17} 18#mv .mv { 19 z-index: 100; 20}
html2
1 <section id="mv"> 2 <div class="mv"> 3 <img src="img/mv.png" width="400px" alt="" /> 4 </div> 5 <div class="trapezoid"> 6 </div> 7 </div> 8 </section>
css2
1#mv { 2 max-width: 100%; 3 height: 500px; 4 background: #87e5fc; 5 position: relative; 6} 7#mv .mv { 8 z-index: 100; 9} 10#mv .trapezoid { 11 position: absolute; 12 width: 700px; 13 height: 100%; 14 border-top: 500px solid #bdf1fe; 15 border-left: 100px solid transparent; 16 border-right: 100px solid transparent; 17 box-sizing: border-box; 18 top: 0; 19 left: 30px; 20 z-index: 5; 21}
試したこと
html1では疑似要素を使用したが、うまくいかなかったので、
原因は写真(.mv)が疑似要素を入れている#mvに囲まれているからだと推測し、
html2では別の台形用divを作成した。
z-indexを入れてみましたがうまく出来ませんでした。
お分かりになる方がいましたらよろしくお願いいたします。
回答1件
あなたの回答
tips
プレビュー
下記のような回答は推奨されていません。
このような回答には修正を依頼しましょう。
2023/03/26 15:40