TAGCSS
clip-pathで背景を好きな形に切り抜く方法：CSS
シェア
ツイートCSSのclip-pathで背景を好きな形に切り抜く方法をご紹介します。
clip-pathの書き方
例えばboxというclassの要素を上下斜めに切り抜きたい場合、
clip-pathは以下のように記述します。
.box{
clip-path: polygon(0 10%, 100% 0, 100% 90%, 0 100%);
}
clip-pathのプロパティ
clip-pathのプロパティには以下の種類があります。
| 値 | 意味 |
|---|---|
| inset() | 矩形（四角形）を定義 |
| circle() | 正円を定義 |
| ellipse() | 楕円を定義 |
| polygon() | 多角形を定義 |
| path() | パスによる図形を定義 |
それぞれ説明すると長くなりますので今回は省略します。
一番使うことが多いのはpolygon()かなと思います。
それぞれ値を入れる必要がありますが、自分で計算するのは大変ですので
以下のジェネレーターを使用するとかなり楽になります。
CSSのおすすめ参考書
ポチップ
