CSS clip-path プロパティ (HTML用)

- CR

SVGまたは形状定義を使用してHTML要素の表示領域を定義する方法。

Chrome

  1. 4 - 23:サポートされていません
  2. 24 - 54:部分的にサポートされています
  3. 55 - 123:部分的にサポートされています
  4. 124:部分的にサポートされています
  5. 125 - 127:部分的にサポートされています

Edge

  1. 12 - 17:サポートされていません
  2. 18:デフォルトで無効
  3. 79 - 123:部分的にサポートされています
  4. 124:部分的にサポートされています

Safari

  1. 3.1 - 6.1:サポートされていません
  2. 7 - 13:部分的にサポートされています
  3. 13.1 - 17.3:部分的にサポートされています
  4. 17.4:部分的にサポートされています
  5. 17.5 - TP:部分的にサポートされています

Firefox

  1. 2 - 3:サポートされていません
  2. 3.5 - 46:部分的にサポートされています
  3. 47 - 53:部分的にサポートされています
  4. 54 - 124:サポートされています
  5. 125:サポートされています
  6. 126 - 128:サポートされています

Opera

  1. 9 - 12.1:サポートされていません
  2. 15 - 41:部分的にサポートされています
  3. 42 - 108:部分的にサポートされています
  4. 109:部分的にサポートされています

IE

  1. 5.5 - 10:サポートされていません
  2. 11:サポートされていません

Chrome for Android

  1. 124:部分的にサポートされています

Safari on iOS

  1. 3.2 - 6.1:サポートされていません
  2. 7 - 12.5:部分的にサポートされています
  3. 13 - 17.3:部分的にサポートされています
  4. 17.4:部分的にサポートされています
  5. 17.5:部分的にサポートされています

Samsung Internet

  1. 4 - 5.4:部分的にサポートされています
  2. 6.2 - 23:部分的にサポートされています
  3. 24:部分的にサポートされています

Opera Mini

  1. すべて:サポートされていません

Opera Mobile

  1. 10 - 12.1:サポートされていません
  2. 80:部分的にサポートされています

UC Browser for Android

  1. 15.5:部分的にサポートされています

Android Browser

  1. 2.1 - 4.3:サポートされていません
  2. 4.4 - 4.4.4:部分的にサポートされています
  3. 124:部分的にサポートされています

Firefox for Android

  1. 125:サポートされています

QQ Browser

  1. 14.9:部分的にサポートされています

Baidu Browser

  1. 13.52:部分的にサポートされています

KaiOS Browser

  1. 2.5:部分的にサポートされています
  2. 3:サポートされています

サポートは、特にHTML要素の`clip-path` CSSプロパティを指します。 SVGでの`clip-path`のサポートは、基本的なSVGをサポートするすべてのブラウザでサポートされています。

リソース
外部SVGの形状に関するChromiumのバグ
外部SVGの形状に関するWebKitのバグ
Codepenの例:ポリゴンで画像をクリッピングする
CSS Tricksの記事
ビジュアルテストケース