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

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

ただいまの
回答率

90.99%

  • CSS

    4821questions

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

  • SVG

    66questions

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

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

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 608

kenkbou

score 138

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

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が上)
といった条件で作りたいです。

<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 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 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ページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

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

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

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

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • kei344

    2017/10/25 21:32

    「overlay」とは?

    キャンセル

  • kenkbou

    2017/10/25 21:35

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

    キャンセル

  • kenkbou

    2017/10/26 08:27

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

    キャンセル

回答 2

checkベストアンサー

0

例えばこんな感じ?

http://jsdo.it/defghi1977/MCA7

複数背景を用意してページ全体の斜め線をposition:fixedで固定すればイケると思う.

  • sectionsection:afterの両方に同じストライブSVG背景画像を用意し, position:fixedで位置を固定する. するとあたかも画面全体をストライプが覆ったように見える.
  • section:afterにはbackground-imageプロパティの複数指定を使ってセクション区切りの画像とストライプSVG画像を重ねる.

※下のコードは必要な部分のみを切り出したもの. 見通しを良くするためにlinear-gradientを使って斜め区切りを作っていますが, 別にSVGでも同じです.

<section id="section-title">
  <h1>SVG Section Separate</h1>
</section>
<section id="section1">
  <h2>Section First</h2>
</section>
<section id="section2">
  <h2>Section Second</h2>
</section>
<section id="section3">
  <h2>Section Third</h2>
</section>
:root{
  --color_1: #faf6df;
  --color_2: #5ba4cf;
  --color_3: #cf6a80;
  --color_4: #61c06a;
  --stripe: url(http://jsrun.it/assets/k/k/v/F/kkvFF);
}
* {
    margin: 0;
    padding: 0;
}
body {
    text-align: center;
    background: var(--color_1);
}
#section-title {
    color: #594433;
}
section {
    color: #fff;
    background-attachment: fixed;
    background-image: var(--stripe);
}
#section1 {
    background-color: var(--color_2);
}
#section2 {
    background-color: var(--color_3);
}
#section3 {
    background-color: var(--color_4);
}
section:after {
    content: "";
    background-repeat: repeat, no-repeat;
    background-size: 100px 50px, 100% 100%;
    background-attachment: fixed, scroll;
    display: block;
    height: 150px;
    width: 100%;
}
#section-title:after {
    background-image: var(--stripe), linear-gradient(to bottom right, var(--color_1) 50%, var(--color_2) 50.2%);
}
#section1:after {
    background-image: var(--stripe), linear-gradient(to bottom left, var(--color_2) 50%, var(--color_3) 50.2%);
}
#section2:after {
    background-image: var(--stripe), linear-gradient(to bottom right, var(--color_3) 50%, var(--color_4) 50.2%);
}
#section3:after {
    background-image: var(--stripe), linear-gradient(to bottom left, var(--color_4) 50%, var(--color_1) 50.2%);
}
<!--SVG-->
<svg width="100px" height="50px" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
<path d="M-200 100l300-150m-250 150l300-150m-250 150l300-150m-250 150l300-150m-250 150l300-150" stroke="white" stroke-width="1"/>
</svg>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/11/03 03:47

    ありがとうございます!
    とても勉強になりましたmm

    キャンセル

0

とりあえず気になった箇所のみ指摘します。
擬似要素は content プロパティが無いと表示されません。

#content02::before {
    content: "";
    display: block;
    width: 100%;
    height: 10vh;
    background-size: 100vw 10vh;
    background-repeat: no-repeat;
    background-color: red;
}

動くサンプル:https://jsfiddle.net/sm1zcqqa/1/


【開発者ツールを使おう! カスタマイズするphpファイルを探す-その1 | RYUS blog】
http://ryus.co.jp/blog/customize-php-search-1/

【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
http://www.buildinsider.net/web/chromedevtools/01

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/10/25 22:04

    すみません、こちらはcontent02,03ともに一括でスタイリングしておりました。なので擬似クラスは使用出来ております。

    キャンセル

  • 2017/10/25 22:13

    「書かれている状況が再現するコード」を依頼したのですが・・・。

    キャンセル

  • 2017/10/25 22:30

    失礼いたしました、、、斜めになっている背景に斜線を入れたいという内容になります、、

    キャンセル

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

  • ただいまの回答率 90.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

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

  • CSS

    4821questions

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

  • SVG

    66questions

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