【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 デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その2

目次1 前回は・・・2 考え方3 保存したフォーマットにデータを入れる4 ExcelからPDFへ変換する4.1 mpdfで変換する4.2 TCPDFで変換する4.2.1 IPAexフォントのインストール5 結局何がいいの? 前回は・・・ 前回はPHPでExcelファイルを操作する方法をまとめました。 基本的にはCSV出力や一括登録の代替案としてまとめましたが、PhpSpreadsheetを使うことでExcelで作成した書類のフォーマットにPHPでデータを入力してPDFで出力す […]

プログラミング

【PHP】PHPでExcelファイルを操作するお話 その1

目次1 こういうことってないですか?2 インストール方法3 PHPでライブラリの呼び出し方4 Excelファイルのエクスポート方法4.1 ちなみに・・・5 Excelファイルのインポート方法6 これを組み合わせると??? こういうことってないですか? webでの管理システムを設計するときに「CSVでインポートやエクスポート機能を付けてよ」って言われる事があります。 インポートに関しては一括登録や一括削除や更新など割とリスクが大きいのですが、エクスポートはあったりします。 CS […]

スマホアプリ

【Android】スプラッシュスクリーンを設定するお話

スマホアプリを作る上で欠かせない・・・訳ではないですが、アプリの構成に必要なのはスプラッシュスクリーン(以下スプラッシュ画面)ですよね 目次1 そもそもスプラッシュ画面とは?2 Androidアプリで実装する場合(今まで)3 SplashScreen API登場3.1 スプラッシュ画面用のActivityを用意する3.2 themes.xmlにテーマを記述する そもそもスプラッシュ画面とは? スマホアプリにかかわらず、ほとんどのアプリやプログラムを起動した際に一瞬表示される画 […]

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

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

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

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