[CSS] CSS クリップパス プロパティの紹介（译）_html/css_WEB-ITnose

元のアドレス: https://www.sitepoint.com/introducing-css-clip-path-property/

Web ページは主に長方形に分散されています。一方、印刷メディアは形状が多様になる傾向があります。この差の原因は、印刷メディアのコンテンツを実現するための適切なツールが欠如していることです。

このチュートリアルでは、要素を部分的に表示できるようにするクリップパス属性を紹介します。要素の表示領域は、指定した値によって決まります。まず基本から始めて、次に構文と高度な概念に進みます。

基本

クロップとは、何かから部分を切り取ることです。私たちの場合、これは Web ページ上の要素を完全または部分的に非表示にする操作です。この記事で使用されているクリッピングに関連する他の 2 つの概念は、クリッピング パスとクリッピング領域です。

クリッピング パスは要素をクリップするために使用するパスであり、クリッピング領域をマークします。単純な形状でも複雑な多角形でも構いません。クリッピング領域は、クリッピング パスが閉じられた後に含まれる領域全体です。

トリミング領域の外側の要素はブラウザによってトリミングされます。これらの要素には、背景やコンテンツだけでなく、境界線やテキストの影なども含まれます。さらに、ブラウザは要素のクリッピング領域の外側にあるホバー イベントやクリック イベントをキャプチャしません。

特定の要素が非長方形であっても、この特定の要素を囲む要素は、特定の要素の初期形状の要素フロー位置に残ります。クリップされた要素の形状に合わせて周囲の要素の流れを揃えるには、shape-outside 属性を使用する必要があります。詳細については、SitePoint チュートリアルを参照してください。

同時に、このプロパティを非推奨のプロパティ クリップと混同しないように注意してください。クリップの使用は非常に厳密であり、長方形へのトリミングのみをサポートします。

構文と使用法

この属性の正しい構文は次のとおりです

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

上記の属性値の具体的な意味

• クリップソースは、URL を通じて内部または外部の SVG 要素を参照します。

• basic-shape は、CSS Shapes 仕様で定義されている基本的なシェイプ関数を受け入れます。

• geometry-box はオプションの属性です。基本シェイプ関数を使用するときにこの属性を使用すると、基本シェイプによってトリミングされた参照ボックスのように動作します。 geometry-box が単独で使用される場合、丸みを帯びた形状 (border-radius プロパティで設定) を含む、指定された要素の形状が使用されます。このプロパティについてはさらに詳しく説明します。

ここで、基本的なシェイプ関数を使用する次の CSS コードを考えてみましょう

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

画像をひし形の形にクリップします。しかし、なぜこれらの画像は台形や平行四辺形ではなくひし形に切り取られているのでしょうか?それは値を設定した頂点によって異なります。次の図は、ポリゴンをクリップするときの一般的な構成を説明しています。

各点の最初の座標によって、X 軸上の位置が決まります。同様に、各点の 2 番目の座標によって y 軸の位置が決まります。各点は時間方向にプロットされます。ひし形の右端の点を考えてみましょう。これは y 軸の途中にあるため、y 座標は 50% です。同様に、その右端の点は x 軸上にあるため、その座標点は 100% になります。他の点の座標点もこの例に基づいて決定できます。

geometry-box 値を使用して要素をトリミングする

HTML 要素をトリミングする場合、geometry-box (または Reference box) の値は、margin-box、border-box、padding-box、または content- のいずれかの要素になります。箱。ジオメトリ ボックスの値は以下のように使用する必要があります

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

上記の場合、要素内のマージン ボックスが参照として使用され、クリッピング ポイントの実際の座標が決定されます。ポイント (10%, 10%) はマージン ボックスの左上隅にあるため、クリッピング パスはそのポイントに配置されます。

SVG 要素の場合、フィルボックス、ストロークボックス、ビューボックスが考えられます。ビューボックスが指定されていない場合、ビューボックスの値が SVG ビュー ウィンドウへの最も近い参照に使用されます。

クリップパスを使用する

この属性には多くの興味深い用途があります。まず、テキスト コンテンツ領域を改善できます。下の写真を見てください。 2 番目の段落のタイトルと背景は両方とも、clip-path プロパティを使用して作成されます。

グラデーションやその他の同様のテクニックを使用して、最初の背景を簡単に作成できます。ただし、クリップパスを使用せずに 2 番目の背景画像を作成するのは難しい場合があります。情報アイコンのような背景画像の下部にある線が完全な水平ではなく、少し傾いていることに注意してください。クリップパスを使用すると、1 行の CSS コードでこの効果を実現できます。

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

背景には 7 つの頂点があり、それらはポリゴンのクリップパスに 1 つずつ反映されます。どうやってこの座標を思いついたのですか?実際に試してみてください。そうすることで、概念をより深く理解できるようになります。以下の演習で試してみてください。

通过这个属性你也可以把图片裁剪为不同的形状。然后在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你还能做到很多东西-你可以创建任何形状的按钮或者给你的菜单增加漂亮的悬浮效果。没有想不到只有做不到！

增加动画

这个属性也可以添加动画效果。唯一需要记住的是图片初始形状和裁剪形状的顶点数必须相同。这是有原因的，否则浏览器不知道在哪里添加额外的顶点（或者删除它）。下面是一个关于梯形动画的 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%);   } } 

浏览器支持

这个属性不被 IE 和 Edge 支持。Firefox 只部支持 clip-path（只支持 url() 语法）。但是从版本号 47 之后，通过设置 layout.css.clip-path-shapes.enabled为 enabled，Firefox 也支持这个属性。

Chrome, Safari and Opera 需要添加 prefix-webkit-前缀才能正确生效。不幸的是，它们也不支持外部 SVGs 引用的形状。你可以在 Can I Use 上查看浏览器的支持情况。

结论

本教程介绍了基本的 clip-path帮助你了解它。虽然并没有花费很多时间去学习如何使用这个属性，想要创造性的使用它还需要足够的联系。等到浏览器能够很好支持它的时候，你准备好使用 clip-path创造出令人惊艳的效果了吗？

我还想介绍两个工具 – Bennett Feely 开发的 clippy和 CSS Plant 开发的 clip path generator。这些工具方便你创建复杂的多边形路径。

如果你也使用 clip-path创建了精彩的东西，欢迎你在评论中留言。