【CSS】clip-pathを使ってWEBページに斜めのデザインをコーディングする

  • このエントリーをはてなブックマークに追加

WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。
これを実際にレスポンシブでコーディングするとなると、工夫が必要です。
(筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります)

今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。



clip-path

斜めのデザインを作るには、CSSプロパティのclip-pathを使用します。
まず、ブロック要素のdivタグにclip-pathを適用すると、こうなります。


この1行を追加するだけで、要素が設定した形にマスクされます。マスクして切り抜くイメージなので、box-shadowやborderは思った通りに表示されない場合がありますので注意してください。
細かく解説していきましょう。

それぞれの値の解説

先程の例のclip-pathには、polygon()という値が使用されています。
このpolygon()は、四角形を意味します。


()の中には4つの角のX座標とY座標を記述します。X座標やY座標というのは、基準点からの座標です。%やvwなど、好きな単位で構いません。
左上のポイントを基準点として、時計回りにポイントの座標を記述します。

また、X・Y座標の記述にcalc()を使用することもできます。


このように、各ポイントの座標を指定すれば、自由に形を作ることができます。あとはwidthやbackgroundなどのプロパティも追加して、さらに見栄えを整えましょう。
もちろん、メディアクエリを使用してのレスポンシブに対応することも簡単です。ワイドディスプレイ用に追加で画像を用意したりする必要もありません。あなたのWEBサイトはより軽量で快適になるでしょう。

斜めエフェクトの例

下辺が斜め


下辺が斜め(反転)


台形


平行四辺形




執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

WordPress

アンケートフォームをホームページに設置できるWordPressプラグインの活用事例4選

WordPressでアンケートフォームを作成したい!けれどきちんと日本語対応しているプラグインが見つからない…と思ったことはありませんか? 弊社でリリースをしたフォーム作成作成プラグイン「Easy Form Maker」であれば、完全日本語対応で、通常のお問い合わせフォームだけでなく、アンケートフォームの作成を行うことができます。 今回は、実際にどんなアンケートフォームが作成できるかご紹介します。 目次1 Easy Form Makerって?2 イベントなどのフィードバックア […]

WordPress

カレンダーをホームページに表示できるWordPressプラグインの活用事例4選

イベントのお知らせをカレンダー形式で掲載したいけれど、なかなかWordPressの日本語プラグインでピッタリなものが見つからない…と思ったことはありませんか? 弊社でリリースをしたWordPressのイベントカレンダープラグイン「Event Calendar Maker」であれば、完全日本語対応で、ホームページ上に簡単にイベントカレンダーを掲載することができます。 今回は、実際にどんなシーンでこのカレンダーが活用できるのかをご紹介します! 目次1 Event Calendar […]

スマホアプリ

高齢者を見守るアプリ「みまもりシルバー」をリリースしました!

高齢のご家族が外出中、いつもと違う時間に帰ってこないと、ちょっとした不安が頭をよぎることはありませんか? 「道に迷っていないかな」「転んでいないかな」…心配事はなかなか尽きないですよね。 そんな心配をすぐに解消できるGPS見守りアプリ「みまもりシルバー」をリリースしました。 メールアドレスなどによる会員登録やサービス契約は不要!基本無料で、かんたんに使うことができます。 この記事では、アプリの魅力や使い方を詳しくご紹介します。 目次1 みまもりシルバーはなにができるの?1.1 […]

株式会社8bit (エイトビット)

東京都目黒区でWebサイト制作、Webシステム開発などを行っております。
コーポレートサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

Web制作に関するご相談はお気軽にどうぞ

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。