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

2018年12月25日2021年11月27日

斜めの背景を作るための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;
}

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

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

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

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

極端な例だとbodyにoverflow-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%;
}