CSS プロパティを理解する Clip-path_html/css_WEB-ITnose-htmlチュートリアル-php.cn

Web ページは主に長方形ですが、対照的に、印刷メディアの形状はより多様です。この違いの理由の 1 つは、Web ページ開発には印刷メディアと同様に適切なツールが存在しないことです。

この記事では、クリップパス属性について説明します。この属性を使用すると、要素の特定の部分を非表示にすることができ、設定されたパラメーター値によって制御されます。まず基本的な概念を学び、次にクリップパス構文を紹介し、最後により高度な概念を見ていきます。

基本コンセプト

クリッピングとは、何かから部分を切り取ることです。フロントエンドでは、クリッピングはページ要素の全体または一部を非表示にする操作です。クリッピングに関して、この記事では、クリッピングパスとクリッピング領域という 2 つの他の概念についても説明します。

クリッピングパスは要素をクリップするために使用されるパスであり、クリッピング領域をマークできます。クリッピングパスは、基本的な形状または複雑な多角形のパスにすることができます。クリッピングパスで囲まれた領域がクリッピング領域です。

ブラウザは、背景やその他の同様のコンテンツだけでなく、境界線やテキストシャドウなど、クリッピング領域の外側の領域をトリミングします。さらに優れているのは、ブラウザーが要素のクリッピング領域の外側にあるホバー、クリック、その他のイベントをキャプチャしないことです。

現在、一部の特定の要素が四角形によって制限されていない場合でも、要素の周囲のコンテンツは実際にはその要素を元の形状 (四角形) とみなし、それに応じてドキュメントフローをレイアウトします。切り取られた要素の形状に合わせて周囲の要素をレイアウトするには、shape-outside 属性を使用します。このプロパティの詳細については、この SitePoint チュートリアルを参照してください。

この属性をクリップ属性と混同しないように注意してください。一般に、clip 属性の使用は避けてください。これには多くの制限があり、長方形のクリッピングのみがサポートされるためです。

構文と使用法

この属性を使用するための正しい構文は次のとおりです:

clip-path: <clip-source> | [ <basic-shape> || <geometry-box> ] | none

ログイン後にコピー

上記の属性値には以下が含まれます:

clip-source は内部または外部 SVG の URL 参照にすることができます。 ClipPath> 要素。

basic-shape は、CSS Shapes 仕様で定義された基本的な形状関数にすることができます。

geometry-box はオプションのパラメータです。このパラメータを Basic-shape 関数と一緒に使用すると、basic-shape のクリッピング作業用のリファレンスボックスを提供できます。 geometry-box が単独で指定されている場合、角の形状 (border-radius プロパティによって提供される) を含む、指定されたボックスの形状がクリッピングパスとして使用されます。それについては後ほど詳しく説明します。

ここで、基本的なシェイプ関数を使用した次の CSS コードを見てください:

img {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);}

ログイン後にコピー

このコードは、すべての画像をひし形の形に切り抜きます。しかし、なぜ画像が台形や平行四辺形ではなくひし形にトリミングされているのでしょうか?これは関数の頂点値に依存します。次の図は、ポリゴンクリッピングパスを生成するための規則を示しています。

ポリゴンクリッピングパスの図

各点の最初の座標値は X 軸上の位置を決定し、2 番目の座標値はそれを指定します。すべての点はy 軸に沿って時計回りにプロットされます。たとえば、ひし形の右端の点は y 軸の中腹にあるため、その y 座標は 50% になります。同時に、この点は x 軸の右端に位置するため、その x 座標は 100% になります。他の点の座標も同様にして求めることができます。

ジオメトリボックスを使用して要素をクリップする

HTML 要素をクリップする場合、ジオメトリボックス (または参照ボックス) はマージンボックス、ボーダーボックス、パディングボックス、またはコンテンツボックスにすることができます。 geometry-box の使用法は次のとおりです。

.clip-me {  clip-path: polygon(10% 20%, 20% 30%, 50% 80%) margin-box;  margin: 10%;}

ログイン後にコピー

上の例では、要素のマージンボックスが、クリッピングポイントの実際の位置を決定するための参照として使用されます。点 (10%, 10%) はマージンボックスの左上隅であるため、クリップパスの位置はこの点に基づいて計算されます。

SVG 要素をトリミングする場合、ジオメトリボックスはフィルボックス、ストロークボックス、ビューボックスにすることができます。ビューボックスの値が指定されていない場合は、デフォルトで最も近い SVG ビューポートが参照ボックスとして使用されます。

クリップパスの使用法

この属性は、いくつかの興味深いことを行うために使用できます。まず、テキストの内容が改善されます。以下の画像を見てみましょう。タイトルの背景と 2 番目の段落の両方でクリップパス属性が使用されています。

クリップパスの例

最初の背景は、グラデーションまたはその他の同様のものを使用して簡単に実現できます。テクニック。しかし、クリップパスの助けがなければ、2 番目の背景を生成するのはそれほど簡単ではありません。メッセージボックススタイルの背景の下部の線は水平ではなく、わずかに傾いていることに注意してください。クリップパスを使用してこの効果を実現するには、次の 1 行の単純な CSS コードのみが必要です:

.p-msg {  clip-path: polygon(0% 0%, 100% 0%, 100% 75%, 75% 85%, 75% 100%, 50% 80%, 0% 75%);}

ログイン後にコピー

背景有 7 个顶点，这在多边形的 clip-path 中有所体现。也许你会问我是怎样得出这些坐标的。这个问题我会留给读者们解决，这样可以帮助你们更好地理解概念。打开下面的 CodePen 可以看到实现代码：

你也可以用这个属性将图片裁剪成不同的形状，并加点 CSS 来将它们排列的更加炫酷。画廊中的缩略图不必是长方形的，用户头像的形状也可以随心所欲。本文将图片做成菱形的。因为所有的图片都是基础菱形的，所以可以共用 clip-path 的值。下面是最右侧图片的 CSS 代码：

.right {  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);  position: relative;  top: -352px;  left: 256px;}

ログイン後にコピー

使用 clip-path 的图片效果如下：

clip-path 还可以做更多的事——你可以做出奇形怪状的按钮，或给导航菜单添加好玩的 hover 效果，只有想不到，没有做不到！

添加动画

这个属性也可以与动画相结合。但是必须记住，最后形状的顶点数必须和初始形状的顶点数相同。这很重要，否则浏览器会不知道在哪添加多余的顶点（或是从哪移除顶点）。如下 CSS 代码为梯形添加了动画：

@keyframes polygons {  25% {    clip-path: polygon(20% 0%, 100% 38%, 70% 90%, 0% 100%);  }  50% {    clip-path: polygon(0 46%, 100% 15%, 55% 74%, 0 100%);  }  70% {    clip-path: polygon(100% 38%, 100% 38%, 66% 100%, 0 53%);  }}

ログイン後にコピー

在动画的最后一段，梯形会变成三角形。如上文提到的，我们不能改变顶点的数目还指望着动画会是平滑的，改变顶点数目会造成动画过渡生硬。为了解决这个问题，我在最后一个多边形中把前两个顶点设置为相同的，这样四边形就可以完美的转换为三角形了。