KH-WEBLOG TOP > WEBメモ > CSS > clip-pathで背景を好きな形に切り抜く方法:CSS

clip-pathで背景を好きな形に切り抜く方法:CSS

CSSのclip-pathで背景を好きな形に切り抜く方法をご紹介します。

コーディング・WordPress化作業を代行します

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()かなと思います。
それぞれ値を入れる必要がありますが、自分で計算するのは大変ですので
以下のジェネレーターを使用するとかなり楽になります。

Clippy — CSS clip-path maker

コーディング・WordPress化作業を代行します

CSSのおすすめ参考書

TAGS

.htaccess ActionScript All in one seo pack Contact Form 7 CSS CSS3 EC-CUBE Flash HTML HTML5 JavaScript jQuery LightBox PHP RSS SEO WordPress アイキャッチ画像 アクセス解析 カスタムフィールド カテゴリー カラーミーショップ カート コメント ショートコード ソースコード テンプレートタグ ドロップダウンメニュー パーマリンク フォーム フルスクリーン プラグイン ページテンプレート ページナビ ページ分割 マウスイベント リダイレクト リンク レンタルサーバー ロールオーバー 携帯サイト 条件分岐 正規表現 角丸 関連記事