2021/2/18 HTML&CSS辞典をオープンしました! コンテンツは随時更新します!

[CSS] clip-pathプロパティでクリッピング領域を指定しよう!

clip-pathの評価
頻出度
(1.0)
重要度
(1.0)
総合評価
(1.0)




1.clip-pathとは?

clip-pathプロパティはクリッピング領域を指定する際に利用します。

値の指定方法は以下の通りです。

{ clip-path: 値; }

値の指定方法

  • none
  • url()
  • シェイブ関数
  • margin-box
  • border-box
  • padding-box
  • content-box
  • fill-box
  • stroke-box
  • view-box




2.clip-pathの使い方

それではclip-pathの使い方をみていきましょう。

以下のようにすることで画像はellipse()で指定された形で切り抜かれます。

.img {
 clip-path: ellipse(100px 50px at 100px 75px);
}

他にも値を設定できるのでいろいろと試してみることをオススメします!




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です