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

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

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

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS

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

解決済

背景を斜めにかっこよくする

kenkbou
kenkbou

総合スコア151

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS

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

2回答

0評価

0クリップ

572閲覧

投稿2017/10/25 11:47

編集2017/10/25 12:49

お世話になっております。

CSSとSVGなどを駆使して以下のサイトのように背景を斜めにしました。
http://www.webopixel.net/html-css/1032.html

ここで、その背景の中に斜め線を入れたいと思っております。

方法として以下を試してみましたが、失敗しました。
サイト全体に斜め線のoverlayをかける
→ コンテンツ部分はz-indexで前に出したが、positionがabsoluteしたものが前に出ない

何か良い方法をご存知の方教えていただきたいです。

以下がソースとなります。
※ id=content01にはoverlayはかけたくありません。
※ content02、03のabsoluteしている画像にはoverlayはかけたくない
※ content02の画像がcontent01に若干 重なる(content02が上)
といった条件で作りたいです。

Html

<body> <div class="overlay"></div> <div id="content01"> <img src="images/content01.png" width="600px"> </div> <div id="content02"> <img src="images/content02.png" width="600px"> </div> <div id="content02"> <img src="images/content03.png" width="600px"> </div> </body> <style> body {position:relative;} .overlay { position: absolute; width: 100%; height: 100%; background-image: url(images/strip.png); background-repeat: repeat; z-index: 11; } #content01 { min-height: 500px; background-image: url(images/content01.png); background-position: top center; background-repeat: no-repeat; background-size: contain; } #content02 { height: 500px; padding-top: 120px; padding-bottom: 120px; width: 100%; background: #ccc; z-index: 1; } #content02 img { position: absolute; } #content02:before { background-image: url("svg/content02.svg"); } #content03 { height: 500px; padding-top: 120px; padding-bottom: 120px; width: 100%; background: #aaa; z-index: 1; } #content03 img { position: absolute; } #content03:before { background-image: url("svg/content03.svg"); } </style>

content02.svg

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0,100 v-100 L100,100 Z" fill="#ccc" /> </svg>

content03.svg

SVG

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100" preserveAspectRatio="none"> <path d="M0,100 v-100 L100,100 Z" fill="#aaa" /> </svg>

以下のような背景のデザインにしたいと考えております。
イメージ説明

良い質問の評価を上げる

以下のような質問は評価を上げましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

  • プログラミングに関係のない質問
  • やってほしいことだけを記載した丸投げの質問
  • 問題・課題が含まれていない質問
  • 意図的に内容が抹消された質問
  • 過去に投稿した質問と同じ内容の質問
  • 広告と受け取られるような投稿

評価を下げると、トップページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

kei344

2017/10/25 11:48

書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
kenkbou

2017/10/25 12:08

ありがとうございます。ソースを記載させていただきました。よろしくお願い致します。
kei344

2017/10/25 12:32

「overlay」とは?
kenkbou

2017/10/25 12:35

薄い白の斜めの線のことになります。
kenkbou

2017/10/25 23:27

すみません、やはりこちらは難しそうですか・・・?

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

SVG

SVGは、XMLを基盤とした2Dベクター画像記述言語。画像を線・面といった図形の集合体として扱うベクター画像のため、環境に適した表示が可能です。アニメーション機能もサポートされており、簡単なインタラクティブコンテンツ作成もできます。

CSS

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