オシャレなサイトはやっている斜め背景

ホームページのデザインで、このような斜めの背景を見た事はありませんでしょうか。
コンテンツをまっすぐに区切るより、このように斜めに区切るだけでおしゃれなデザインになりますね。

手っ取り早くコピペで使いたい人へ

まずは、内容の事はどうでもいいのでとりあえずコピペで作れるようなものが欲しいと言う人も多いと思うので、サンプルコードを貼っておきます。
これを使えば、簡単に背景が設置できます。

See the Pen 斜め背景 by Yoshimune (@hachidaime) on CodePen.

斜め背景をCSSで作る方法

斜め背景をCSSで作る方法はいくつかありますが、
今回は、clip-pathを使った方法を紹介します。
clip-pathについてはこちらを読んでください

「CSS 斜め背景」で検索すると、様々なやり方が紹介されていると思います。
背景の四角形を変形させたり回転させたり、ボーダーを使って作る方法もあります。
ブラウザのサポートの関係で過去にはそのような方法が最適な時もありましたが、柔軟性が低かったり、スクリーンからはみ出た部分の処理でなかなか対応が大変だったりしました。
clip-pathを使えば、より直感的で形状に対しての柔軟性もあるので、clip-pathを使った斜め背景を覚えましょう。

やってることはとっても簡単。
まずは

まずはdivやsectionなどのタグで、コンテンツのエリアを作成します。

<section class="section">
    ここにコンテンツ
</section>

作ったエリアをclip-pathを使って変形しましょう。

.section {
  background-color:#eee;
  clip-path: polygon(0 50px, 100% 0, 100% calc(100% - 50px), 0 100%);
}

今回はpolygonを使って4頂点の位置を指定しています。
clip-pathなので、位置の調整で平行四辺形だけでなく、台形やもっと複雑な背景も作成できますね。

お洒落なデザインも、実際やってみるとclip-pathを使うだけのめちゃくちゃ簡単な方法でしたね。
ちょっと工夫するだけでおしゃれなサイトができるので、ぜひ使ってみてください。

0

-

0