WEBページの要素で、斜め方向にカットされたデザインを見たことがあると思います。
これを実際にレスポンシブでコーディングするとなると、工夫が必要です。
（筆者は過去、斜め画像を用意してbackgroundに配置したところ、超ワイドディスプレイで想定外の表示になってしまったりと、ため息をついた覚えがあります）
今回はCSSのclip-pathを使用して、手軽に斜めのデザインを追加してみましょう。
clip-path
斜めのデザインを作るには、CSSプロパティのclip-pathを使用します。まず、ブロック要素のdivタグにclip-pathを適用すると、こうなります。
|
1 2 3 |
div { clip-path: polygon(0 0, 100% 0, 100% 80%, 0 100%); } |
この1行を追加するだけで、要素が設定した形にマスクされます。マスクして切り抜くイメージなので、box-shadowやborderは思った通りに表示されない場合がありますので注意してください。
細かく解説していきましょう。
それぞれの値の解説
先程の例のclip-pathには、polygon()という値が使用されています。このpolygon()は、四角形を意味します。
|
1 2 3 |
div { clip-path: polygon(x y, x y, x y, x y); } |
()の中には4つの角のX座標とY座標を記述します。X座標やY座標というのは、基準点からの座標です。%やvwなど、好きな単位で構いません。
左上のポイントを基準点として、時計回りにポイントの座標を記述します。
また、X・Y座標の記述にcalc()を使用することもできます。
|
1 2 3 |
div { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 20px), 0 100%); } |
このように、各ポイントの座標を指定すれば、自由に形を作ることができます。あとはwidthやbackgroundなどのプロパティも追加して、さらに見栄えを整えましょう。
もちろん、メディアクエリを使用してのレスポンシブに対応することも簡単です。ワイドディスプレイ用に追加で画像を用意したりする必要もありません。あなたのWEBサイトはより軽量で快適になるでしょう。
斜めエフェクトの例
下辺が斜め
|
1 2 3 4 5 6 7 8 |
div{ display: block; width: 200px; height: 120px; background: #ff923e; /* ▲ここより上は自由に編集してください（以降の例では省略） */ clip-path: polygon(0 0 , 100% 0, 100% 80%, 0 100%); } |
下辺が斜め（反転）
|
1 2 3 |
div{ clip-path: polygon(0 0 , 100% 0, 100% 100%, 0 80%); } |
台形
|
1 2 3 |
div{ clip-path: polygon(20% 0, 80% 0, 100% 100%, 0 100%); } |
平行四辺形
|
1 2 3 |
div{ clip-path: polygon(20% 0, 100% 0, 80% 100%, 0 100%); } |
