CSSで斜めにカットされたセクションを作る3つの方法｜clip-path・transform・SVGの実装例付き

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

最近よく見かける、セクションの上下が斜めにカットされたスタイリッシュなデザイン。
ファーストビューやサービス紹介などで「おっ」と目を引く、印象的なレイアウトになりますよね!

でも「あれって画像を使ってるの？」「どうやって実装するの？」と疑問に思っている方も多いはず。
実はこれ、CSSだけで簡単に実装可能なんです！

今回は、clip-pathやtransform、SVGなどを使った3パターンの斜めカットセクションデザインをご紹介します。
コピペで使えるコード付きなので、ぜひあなたのWebサイトにも取り入れてみてください！

パターン①：clip-pathを使った斜めカット

一番スマートな方法が、CSSの clip-path プロパティを使う方法です。
特別な画像を用意せず、純粋にCSSだけで斜めカットができます。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

このコードでは、clip-path: polygon(...) を使って、四隅の座標を指定し、上下を斜めにカットしています!
ブラウザ対応はChrome, Edge, Firefox, Safariの最新版ならほぼ問題なしです。

パターン②：transformを使って擬似要素でカット

もう少し凝った表現をしたい場合や、clip-path に非対応の環境も考慮するなら、
擬似要素＋transformで斜めのパーツを重ねる方法もおすすめです!

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

この方法は、背景色を白に設定した斜めブロックを上に重ねるイメージです。
transform: skewY() で傾きを作り、実際のセクション自体は矩形のままというテクニック。

パターン③：SVGを使って自由なカットラインに

もっと自由に波形にしたり、角度を変えたいときは、SVGをセクション下部に重ねる方法が便利です。

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

SVGを使えば、曲線や山型なども自由に作れるので、よりグラフィカルなセクション演出におすすめです。

まとめ：CSSで魅せる“ひとクセ”セクションデザイン

斜めにカットされたセクションは、ページの印象を大きく変える強力なデザイン手法です！
でも、やってみると意外とシンプルに実装できるのが今回のポイント。

ぜひ、あなたのWebサイトにも取り入れて、「見た目がちょっといい感じ」のデザインを実現してみてください！

satokotadesignキャンペーン実施中！