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

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

WBOY

リリース： 2016-06-24 11:15:42

オリジナル

1258 人が閲覧しました

元のアドレス: 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%);   } }

ログイン後にコピー