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

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

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
1<body>
2	<div class="overlay"></div>
3	<div id="content01">
4		<img src="images/content01.png" width="600px">
5	</div>
6	<div id="content02">
7		<img src="images/content02.png" width="600px">
8	</div>
9	<div id="content02">
10		<img src="images/content03.png" width="600px">
11	</div>
12</body>
13
14<style>
15body {position:relative;}
16.overlay {
17	position: absolute;
18	width: 100%;
19	height: 100%;
20	background-image: url(images/strip.png);
21	background-repeat: repeat;
22	z-index: 11;
23}
24#content01 {
25    min-height: 500px;
26	background-image: url(images/content01.png);
27    background-position: top center;
28    background-repeat: no-repeat;   
29    background-size: contain;
30}
31#content02 {
32	height: 500px;
33	padding-top: 120px;
34	padding-bottom: 120px;
35	width: 100%;
36	background: #ccc;
37	z-index: 1;
38}
39#content02 img {
40	position: absolute;
41}
42#content02:before {
43    background-image: url("svg/content02.svg");
44}
45#content03 {
46	height: 500px;
47	padding-top: 120px;
48	padding-bottom: 120px;
49	width: 100%;
50	background: #aaa;
51	z-index: 1;
52}
53#content03 img {
54	position: absolute;
55}
56#content03:before {
57    background-image: url("svg/content03.svg");
58}
59</style>

content02.svg

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

content03.svg

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

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

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

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

行動規範の内容に同意します

回答2件

ベストアンサー

例えばこんな感じ？

http://jsdo.it/defghi1977/MCA7

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

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

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

HTML
1<section id="section-title">
2  <h1>SVG Section Separate</h1>
3</section>
4<section id="section1">
5  <h2>Section First</h2>
6</section>
7<section id="section2">
8  <h2>Section Second</h2>
9</section>
10<section id="section3">
11  <h2>Section Third</h2>
12</section>

CSS
1:root{
2  --color_1: #faf6df;
3  --color_2: #5ba4cf;
4  --color_3: #cf6a80;
5  --color_4: #61c06a;
6  --stripe: url(http://jsrun.it/assets/k/k/v/F/kkvFF);
7}
8* {
9    margin: 0;
10    padding: 0;
11}
12body {
13    text-align: center;
14    background: var(--color_1);
15}
16#section-title {
17    color: #594433;
18}
19section {
20    color: #fff;
21    background-attachment: fixed;
22    background-image: var(--stripe);
23}
24#section1 {
25    background-color: var(--color_2);
26}
27#section2 {
28    background-color: var(--color_3);
29}
30#section3 {
31    background-color: var(--color_4);
32}
33section:after {
34    content: "";
35    background-repeat: repeat, no-repeat;
36    background-size: 100px 50px, 100% 100%;
37    background-attachment: fixed, scroll;
38    display: block;
39    height: 150px;
40    width: 100%;
41}
42#section-title:after {
43    background-image: var(--stripe), linear-gradient(to bottom right, var(--color_1) 50%, var(--color_2) 50.2%);
44}
45#section1:after {
46    background-image: var(--stripe), linear-gradient(to bottom left, var(--color_2) 50%, var(--color_3) 50.2%);
47}
48#section2:after {
49    background-image: var(--stripe), linear-gradient(to bottom right, var(--color_3) 50%, var(--color_4) 50.2%);
50}
51#section3:after {
52    background-image: var(--stripe), linear-gradient(to bottom left, var(--color_4) 50%, var(--color_1) 50.2%);
53}

HTML
1<!--SVG-->
2<svg width="100px" height="50px" viewBox="0 0 100 50" xmlns="http://www.w3.org/2000/svg">
3<path d="M-200 100l300-150m-250 150l300-150m-250 150l300-150m-250 150l300-150m-250 150l300-150" stroke="white" stroke-width="1"/>
4</svg>

投稿2017/11/01 11:04

defghi1977

総合スコア4756

kenkbou

2017/11/02 18:47

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

行動規範の内容に同意します

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

CSS
1#content02::before {
2    content: "";
3    display: block;
4    width: 100%;
5    height: 10vh;
6    background-size: 100vw 10vh;
7    background-repeat: no-repeat;
8    background-color: red;
9}
10```**動くサンプル：**[https://jsfiddle.net/sm1zcqqa/1/](https://jsfiddle.net/sm1zcqqa/1/)
11
12---
13
14【開発者ツールを使おう！ カスタマイズするphpファイルを探す-その1 | RYUS blog】
15[http://ryus.co.jp/blog/customize-php-search-1/](http://ryus.co.jp/blog/customize-php-search-1/)
16
17【Web開発でよく使う、特に使えるChromeデベロッパー・ツールの機能 - Build Insider】
18[http://www.buildinsider.net/web/chromedevtools/01](http://www.buildinsider.net/web/chromedevtools/01)