CSSだけで斜めのデザイン背景を作る方法

2023年 1月 5日　Posted　藤原(フロントエンドエンジニア)

今回はCSSで背景を斜めにしてみたいと思います。

背景の上下を少し斜めのデザインにしたページをたまに見かけます。
制作する人によっていろいろなやり方がありますが、CSSプロパティの「clip-path」を使って上下斜めの背景を作成してみたいと思います。

clip-pathで斜めのデザイン背景を作る

clip-pathとは

要素をクリッピング（切り抜き）するときに使用します。
クリッピング領域を作り、基本四角形のものを自在に変えることができます。

指定したクリッピング領域の外側が非表示になり、内側だけが表示されます。

clip-pathによって「円形」や「三角形」「台形」など、いろいろな形にすることができます。

clip-pathの形状の種類

• inset( ) …… 内側へのオフセット（通常は長方形）
• circle( ) …… 円
• ellipse( ) …… 楕円（だえん）
• polygon( ) …… 多角形

サポート状況

サポートされているブラウザーやバージョンを確認して使用すると安心ですね。

https://caniuse.com/?search=clip-path

設定方法

今回は「polygon（多角形）」という値をつかって、上下斜めの背景を作っていきます。

clip-path( )に下記の設定をします。

		/* 値の記述順の説明です。*/
		clip-path:
		polygon(
		0 0,                 /* 左 上 [1]の X軸 Y軸 */
		100% 0,          /* 右 上 [2]の X軸 Y軸 */
		100% 100%,   /* 右 下 [3]の X軸 Y軸 */
		0 100%)         /* 左 下 [4]の X軸 Y軸 */
	
		/* 下記の様に記述します。*/
		clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);

上記コードを追加するだけで、要素が設定した形に切り抜かれます。

• ＊ 内部のコンテンツは表示されて、外部のコンテンツは非表示になります。
• ＊ マスクして切り抜くイメージですので、box-shadowやborderは思った通りに表示されない場合があります。

実際に記述してみましょう。

.diagonal-bg-test-step01 {
	display:block;
	width:710px;
	height:400px;
	background:#F296C5;
	clip-path:polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

角を4カ所設定。四角形になります。
左上[1]のY軸の数値を調整して（下に20％ずらす）、斜めにしてみます。

.diagonal-bg-test-step02 {
	display:block;
	width:710px;
	height:400px;
	background:#F296C5;
	clip-path:polygon(0 20%, 100% 0, 100% 100%, 0 100%);
}

斜めになりました。

どのくらいの角度で斜めにするかどうかは、デベロッパーツールを起動してブラウザー上で図形を編集できるので調整が簡単にできます。
実際に数値を動かしながら、希望の図形を作ることができるのでおすすめです。

デベロッパーツールで調整してみる

Firefoxのデベロッパーツールを起動して、該当の図形を選択します。
すると、cssの「clip-path: polygon」の横にアイコンが見えますのでそのアイコンをクリックします。

図形の角に丸いマークが出現しますので、●をつまんで動かすと自由に変形できます。

右下 [3]の Y軸の数値を調整する（上に20％上げる）と……

.diagonal-bg-test-step03 {
	display:block;
	width:710px;
	height:400px;
	background:#F296C5;
	clip-path:polygon(0 20%, 100% 0, 100% 80%, 0 100%);
}

完成です！

いろいろな図形

斜め背景以外にもclip-pathを使えば、さまざまな形に切り抜きすることができます。

星形

.shape-star{
	display:block;
	width:100px;
	height:100px;
	margin:3rem 0;
	background:#FFE000;
	clip-path:polygon( 50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

吹き出し

.shape-balloon{
	position:relative;
	display: block;
	width: 200px;
	height: 150px;
	margin:3rem 0;
	box-sizing:border-box;
	background:#FFE000;
	clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}
.shape-balloon p{
	position:absolute;
	margin-top:0;
	top:calc(50% - 50px);
	left:calc(50% - 33px);
}

吹き出し（角丸）

roundで角を丸くしました。

.shape-balloon-rounded{
	position:relative;
	margin:3rem 0 6rem;
	width:150px;
}
.shape-balloon-rounded::before{
	position:absolute;
	content: "";
	display: block;
	bottom: -20px;
	right: 28px;
	width:50px;
	height:80px;
	background:#cae6fd;
	clip-path: polygon(0 0, 100% 100%, 100% 0);
}
.shape-balloon-rounded .detail{
	display: block;
	width: 150px;
	height: 100px;
	padding-top:20px;
	box-sizing:border-box;
	background:#cae6fd;
	clip-path: inset(0 round 10px);
}
.shape-balloon-rounded p{
	position:absolute;
	margin-top:0;
	top: calc(50% - 30px);
	left: calc(50% - 23px);
}

四角の写真を丸く変更したい！

そんな時も画像加工ではなくclip-pathで対応できます。
画像処理ソフトがない時はとても便利ですね。

.shape-portrait p img{
	clip-path:circle(124px at 50% 50%)
}

まとめ

clip-pathを使えば、自由な図形を作ることができます。ぜひいろいろ試してみてはいかがでしょうか？