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

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

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

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

HTML5

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

Q&A

解決済

1回答

412閲覧

【CSS】webサイトの背景と画像の間に台形の図形を入れたい

mimicon

総合スコア26

CSS3

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

HTML5

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

0グッド

0クリップ

投稿2023/03/25 15:15

実現したいこと

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を入れてみましたがうまく出来ませんでした。

お分かりになる方がいましたらよろしくお願いいたします。

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

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

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

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

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

guest

回答1

0

ベストアンサー

要素にpositionを設定していないと、z-indexは効きません。(下記リンク参照)

【CSS】z-indexの基本と使い方|効かない時の原因はコレ | JAJAAAN

下記のように、なんらかのposition設計を追加すれば効くようになります。

css#1

1#mv .mv { 2 position: relative; 3 z-index: 100; 4}

投稿2023/03/26 07:47

hatena19

総合スコア33514

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

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

mimicon

2023/03/26 15:40

ありがとうございます。 html2、css2の方の.mvにposition: relative;を足したところ再現できました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.54%

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

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

質問する

同じタグがついた質問を見る

CSS3

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

HTML5

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