斜めの背景を作るためのCSSは「回転させて元に戻す」で書く!

斜めの背景を作るためのCSSの書き方です。要素全体を傾けて中の要素で元に戻すという無理やりぎみな方法となります。

たぶん、はじめて斜めの背景を作る時に困ると思います。わたしの場合、斜めで背景を再現しようと思った時に3パターンほど思いついて試したのですが、最終的に一番扱いやすかったのが、「要素全体を傾けて中の要素で元に戻す」でした笑

他に試した2つのNG例とともに紹介していきます。
もし「もっといいやり方があるよ!」って方がいたら、こっそりと教えてください。

はにわまん
斜めの背景ってなんかカッコいいですね。

斜めの背景を作るためのCSSの書き方

斜めの背景を作るためのCSSの書き方です。要素全体をガタッと傾けて、中の文字を覆う要素は傾きを戻し、傾けた部分がはみ出ないようにoverflow-x: hidden;といったイメージになります。

要素全体をガタッと傾ける

外側を覆っている要素をガッタと傾けます。ただ、傾けると左右に空白が生まれて背景っぽくなくなってしまうので、ウインドウサイズからはみ出来るくらいのサイズを指定してあげてください。

幅がはみ出ているため、水平スクロールが発生してしまいます・・・。

コピー<!-- section1 -->
<section id="section1" class="section">
<div class="inner">
<h2>セクション1</h2>
<p>コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。</p>
</div><!-- /inner -->
</section><!-- /section1 -->
コピー.section {
	-webkit-transform: rotate(5deg) translate3d(0, 0, 0);
	background: #313131;
	margin-left: -25%;
	padding: 0 25%;
	position: relative;
	transform: rotate(5deg) translate3d(0, 0, 0);
	width: 150%;
}

.section .inner {
	-webkit-transform: rotate(-5deg) translate3d(0, 0, 0);
	color: #fff;
	margin: 0 auto;
	max-width: 100%;
	padding: 18px 30px 78px;
	transform: rotate(-5deg) translate3d(0, 0, 0);
	width: 820px;
}

#section1 {
	background: #1a237e;
}

.sectiontransform: rotate(5deg);で傾けて、小要素の.innertransform: rotate(-5deg);で元に戻しています。

傾けて戻す!は回転系のコンテンツだとよく使う書き方です。

はみ出る部分を非表示にする

はみ出ないようにするためには、.sectionをまとめた親要素からoverflow-x: hidden;してあげればOKです。

極端な例だとbodyoverflow-x: hidden;でもいいのかなって気がしています。あまりカッコよくないですが、背景を斜めにするコーディングの場合はいいのかなと。

コピーbody {
	overflow-x: hidden;
}

こうして出来上がるのが以下のような背景コンテンツです!

セクション1

コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。コンテンツです。

斜め背景の作り方でダメな例

斜め背景の作り方でボツにしたパターンを紹介します。この記事を読んだ方は同じ作業をして時間を無駄にしないようにしましょう笑

画像で覆うと背景じゃなくなるパターン

「斜め(三角)の白画像で覆ってしまえば楽じゃね?」って思った時がありました。実際に斜めにはなりますが、斜めの部分が背景じゃなくなるという問題が起こります。

この画像が最背面なら問題ないですが、もしも斜めの部分にさらに後ろの背景や要素を出したいってなった時に困ってしまいます。

画像を斜めにする場合も回転を使うか、斜めにトリミングした画像をあらかじめ作成しておくかの作り方になるかと思います。

斜めがギザギザになるパターン

linear-gradientで斜めにできるぞ!」と思いつく方もいるかと思います。ただ、この書き方は、斜め部分がギザギザになってしまいます(泣)

実際に作ったものはこんな感じです。

この状態でクライアントには出せませんね。。自分も回転させるより背景っぽい作りができそう!と思い、こちらを真っ先に作ってみたのですが、linear-gradientでのギザギザの解消法がいまいち見つからず断念しました・・・。

ちなみに、以下のように記載すると上記の画像のような斜めにはできます。

コピー.section {
	background: #1a237e;
	position: relative;
}

.section .inner {
	color: #fff;
	margin: 0 auto;
	max-width: 100%;
	padding: 0 30px 22px;
	width: 820px;
}

.section::before {
	background: linear-gradient(to top right, #1a237e 0%, #1a237e 50%, transparent 50%, transparent 100%);
	content: "";
	display: block;
	height: 50px;
	left: 0;
	position: absolute;
	top: -50px;
	width: 100%;
}

.section::after {
	background: linear-gradient(to bottom left, #1a237e 0%, #1a237e 50%, transparent 50%, transparent 100%);
	bottom: -50px;
	content: "";
	display: block;
	height: 50px;
	left: 0;
	position: absolute;
	width: 100%;
}

おわり

斜めの背景を作るためのCSSの書き方と、ダメな例の紹介でした。

親要素を回転して小要素で元に戻すという書き方が自分の中では一番使いやすかったです。必ずしも最背面で使うとは限らないので、斜め部分も透過した状態で作っておきたいなと思います。

このページが役に立ったら
いいね!お願いします

運営の励みになります...。

関連の記事