CSSでclip-pathを使用したクリッピングの概要

投稿日: 2022-04-20 2022-04-20
タグ: css

序章

clip-path は、SVG要素、画像、または任意のHTML要素の表示部分を実際にクリップできる非常に興味深いプロパティです。

クリップパスを使用した基本形状の定義

clip-path を使用すると、ポリゴン、楕円、円、またはインセットのいずれかを使用して基本的な形状を簡単に切り抜くことができます。 CSS除外モジュールの一部であるキーワード。

ポリゴン

ポリゴンは、 SVGパスのように、任意の数のポイントを指定できるため、使用可能なすべての形状の中で最も柔軟性があります。提供されるポイントは、 X座標とY座標のペアであり、任意の単位（ピクセルまたはパーセントベースなど）にすることができます。最も柔軟性があるため、最も複雑であり、ツールを使用してポイントを定義することをお勧めします。

例を挙げて説明しましょう。最初に開始画像が表示され、次に clip-path が適用されて三角形が作成され、次にさらに複雑なX字型、最後に星型が表示されます。

/* Triangle */
.polygon1 {
  -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
/* X */
.polygon2 {
  -webkit-clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
  clip-path: polygon(20% 0%, 0% 20%, 30% 50%, 0% 80%, 20% 100%, 50% 70%, 80% 100%, 100% 80%, 70% 50%, 100% 20%, 80% 0%, 50% 30%);
}
/* Star */
.polygon3 {
  -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

サークル

円は次の構文で定義されます： circle（radius at posX posY）。位置はオプションで、デフォルトで 50% 50%になります。説明する2つの例を次に示します。

.circle {
  -webkit-clip-path: circle(50%);
  clip-path: circle(50%);
}
.circle2 {
  -webkit-clip-path: circle(70% at 70% 20%);
  clip-path: circle(70% at 70% 20%);
}

楕円

楕円は、次の構文を使用して定義されます： ellipse（radiusX radiusY at posX posY）。この場合も、位置はオプションであり、デフォルトで 50% 50%になります。次に2つの例を示します。

.ellipse {
  -webkit-clip-path: ellipse(50% 35%);
  clip-path: ellipse(50% 35%);
}
.ellipse2 {
  -webkit-clip-path: ellipse(50% 65% at 70% 50%);
  clip-path: ellipse(50% 65% at 70% 50%);
}

挿入図

inset を使用すると、内側の長方形を定義でき、外側のすべてが切り取られます。これにより、ブラウザで直接画像や要素を効果的に切り抜くことが簡単になります。 round キーワードと境界半径の値を使用して、長方形を丸めることもできます。

.inset {
  -webkit-clip-path: inset(20% 25% 20% 10%);
  clip-path: inset(20% 25% 20% 10%);
}
.inset2 {
  -webkit-clip-path: inset(45% 0% 33% 10% round 10px);
  clip-path: inset(45% 0% 33% 10% round 10px);
}

アニメーションとトランジション

アニメーションとトランジションをclip-pathで適用して、興味深い効果を作成することもできます。アニメーションのすべてのステップに同じ量のポイントが含まれていることを確認してください。例を挙げて説明しましょう。

アニメート！

このアニメーションの作成に使用されるCSSルールは次のとおりです。

.trigger-btn:hover + img {
  animation: magic 4s infinite;
}

@keyframes magic {
  0% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
  20% {
    -webkit-clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
    clip-path: polygon(28% 0, 73% 0, 100% 100%, 0% 100%);
  }
  40% {
    -webkit-clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
    clip-path: polygon(0 0, 100% 72%, 100% 100%, 0 35%);
  }
  60% {
    -webkit-clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
    clip-path: polygon(50% 0, 50% 0, 100% 100%, 0% 100%);
  }
  80% {
    -webkit-clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
    clip-path: polygon(0 70%, 100% 0, 100% 32%, 0 100%);
  }
  100% {
    -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
  }
}

カスタムSVGシェイプ

クリップパス値として機能する任意のSVG形状を定義することもできます。明らかに、 Sketch のようなツールで開始して形状を作成し、SVGマークアップをテキストエディターにコピーすることをお勧めします。 SVGマークアップでは、形状を clipPath 要素でラップし、clipPathをdefsブロックでラップするだけです。

たとえば、次のようなものです。

<svg width="0" height="0">
  <defs>
    <clipPath id="my-shape">
      <path d="M89.6342913,129 C86.6318679,137.611315 85,146.865086 85,156.5 C85,200.767808 119.448105,236.989829 163,239.821749 L163,300 L300,300 L300,163 L251.750745,163 C251.915896,160.855015 252,158.687329 252,156.5 C252,110.384223 214.615777,73 168.5,73 C146.712501,73 126.873981,81.3445721 112.006052,95.0121046 L64.5,0 L0,129 L89.6342881,129 Z">
      </path>
    </clipPath>
  </defs>
</svg>

これで、SVGシェイプのurlキーワードとidを使用して、定義されたシェイプをクリップパス値として適用できます。

.svg-shape {
  -webkit-clip-path: url(#my-shape);
  clip-path: url(#my-shape);
}

追加リソース

Clippy は、クリップパス値を定義するのに役立つ優れたツールです。
ブラウザのサポート： 2020年の時点で、clip-pathには世界中のブラウザで95% c overage がありますが、-webkit-clip-pathプレフィックス付きのバリアントを必ず含めてください。 Safariで必要です。

getdocs

13036