【CSS】斜め背景と矢印背景

今回は、「斜めの背景」と「矢印型の背景」をご紹介いたします。

例によって、サンプルからどうぞご覧ください。
https://revenue-test.biz/test_html/bg_diagonal.html

■斜め背景

まずは斜め背景から。
これ、デザイナーさんにデザインしてもらうと、よく困ってしまうサイトデザインの一つですよね(笑)
個人的には、「こんなデザインしたところで売り上げは変わらんよ」と思って拒否したくなるんですが…(笑)

でもまあ、デザイナーさんも一生懸命考えてデザインしてくださるわけですし、出来ればその思いをなんとか形にしてあげたいですよね。

で、サイト検索すると、あるにはあったんです。
今回の方法とほぼ同じなんですが、ちょっとオリジナル要素を入れつつ…。

<div class="bg-diagonal">
    <div>
～～～コンテンツの内容～～～
    </div>
</div>

まずは、HTML側は、こんな感じで用意いたします。

で、CSS側なんですが…

.bg-diagonal {
   position: relative;
   margin: 80px 0 160px;
   padding: 40px 10px;
   background: #dff;
}
.bg-diagonal:before {
   content: "";
   display: block;
   position: absolute;
   height: 100%;
   width: 100%;
   left: 0;
   top: 0;
   background: #fdc;
   transform: skew(0,-8deg);
}
.bg-diagonal > div {
   position: relative;
   z-index: 2;
}

親要素の <div class="bg-diagonal"> には、わかりやすいように水色背景（#dff）にしております。

親要素の <div class="bg-diagonal"> と、子要素の <div> との間に、
疑似要素 :before （::beforeでもOKですよ。）を入れて、それを背景として使用します。

で、検索で調べた斜め背景の手法では、
これ（:before）をwidth:120%とかにしてはみ出させて、
CSSの transform: rotage(●●●deg); で回転させる…
というものだったんですが、個人的にあんまり美しくないなあ…と。

transform: skew(●●●deg,●●●deg); で傾けさせれば、はみだしとかも気にせずにうまいこと背景を傾けさせることができると思います。
サンプルでは、transform: skew(0,-8deg); としております。
数値を色々といじってみて、デザイン通りの傾きを実現してみてください。

■矢印背景

次は矢印型の背景です。
サンプルHTMLでは、矢印の上下と背景色を変えております。

:before と :after を使用して、親要素の上下に border で三角を描きます。
基本、border の線幅では％の単位は使用できないんですが…
vw と vh は使用できます。

ここで、vw と vh を解説。

vw：ビューポートの幅に対する割合
vh：ビューポートの高さに対する割合

つまり、画面幅に対するパーセンテージが、この単位で指定できる…ということなんです。

まあ、難しいことは抜きにして、HTML側で

<div class="bg-arrow">
    <div>
～～～コンテンツの内容～～～
    </div>
</div>

CSS側で

.bg-arrow {
   position: relative;
   margin: 80px 0 160px;
   padding: 40px 10px;
   background: #fdc;
}
.bg-arrow > div {
   position: relative;
   z-index: 2;
   min-height: 500px;
}
.bg-arrow:before ,
.bg-arrow:after {
   content: "";
   position: absolute;
   display: block;
   left: 0;
   border-style: solid;
}
.bg-arrow:before {
   top: 0;
   margin-top: -5vw;
   border-color: transparent #fdc transparent;
   border-width: 5vw 50vw 0;
}
.bg-arrow:after {
   bottom: 0;
   margin-bottom: -5vw;
   border-color: #fdc transparent transparent;
   border-width: 5vw 50vw 0;
}

こんな感じで矢印型の背景が完成します。
border-width の 5vw の数値を変えると、斜めの具合を調整できますよ♪
その時には、margin-top と margin-bottom のマイナスの数値も同じにしてあげてくださいね。

■矢印背景（背景画像込み）

最後は、背景画像を矢印型に・・・
まあ、要は前述の矢印背景の応用です。

単純に、白のborderを逆の形で背景に乗せる形で使用します。

<div class="bg-arrow2">
    <div>
～～～コンテンツの内容～～～
    </div>
</div>

.bg-arrow2 {
	position: relative;
	margin: 80px 0 160px;
	padding: 7vw 10px;
	background: url(画像URL) no-repeat center center;
	background-size: 100%;
}
.bg-arrow2 > div {
	position: relative;
	z-index: 2;
	min-height: 500px;
}
.bg-arrow2:before ,
.bg-arrow2:after {
	content: "";
	position: absolute;
	display: block;
	left: 0;
	border-style: solid;
}
.bg-arrow2:before {
	top: 0;
	border-color: #fff transparent transparent;
	border-width: 5vw 50vw 0;
}
.bg-arrow2:after {
	bottom: 0;
	border-color: transparent #fff transparent;
	border-width: 5vw 50vw 0;
}

細かい解説は省いておきます。

※ なぜ ::after ::before で書かないのか、とお思いの方もいらっしゃると思いますが、単純にコロンを2回押すのが面倒なだけですｗ
あと :after :before の方が古いブラウザにも対応できる可能性があるのも理由の一つです。
（現状では、もうそんな古いブラウザは考慮に入れなくても大丈夫なんですが…）

疑似要素はコロン2つが正しいらしいんですが、今のところコロン1つが禁止されることもなさそうなので…非推奨になったりしたら、コロン２つ書くようにします(^▽^;)