クリップパスカットの基本的なグラフィック

Webページでは主に長方形で配布されていることは誰もが知っています。印刷媒体は、より多くの異なる形状を持つ傾向があります。この違いの理由は、印刷メディアのコンテンツを実現するための適切なツールが不足しているためです。これはまた、多くのデザイナーの創造性をもたらしました。たとえ彼らが創造的であったとしても、フロントエンドの実装は莫大な開発コストも支払います。

昔は要素を使ってポリゴンを実現することは可能でしたが、疑似要素や他の複数の要素を使って多くの部分を実現する必要があります。幸い、いくつかの基本的なグラフィックをカットし、グラフィックと基本的なグラフィックを組み合わせたクリップパスが登場しています。グラフィック。

次に、この属性の使用法を見てみましょう。

1.基本的な考え方

属性はクリッピングを使用して、要素の表示可能領域を作成します。エリアの一部が表示され、外側のエリアは非表示になります。互換性のページはかなり高いです。

2.いくつかの基本的なグラフィックを描きます

一部のブラウザのサポートを考慮しない場合は、クリップパスを使用してポリゴンを描画する方が、疑似要素を使用してポリゴンを作成するよりもはるかに簡単です。また、八角形よりも1つのdivを描画することもできます。要素は長さと幅から直接開始し、クリップパスの使用は各ポイントの座標から開始します。これは座標ポイントであるため、通常のポリゴンを作成するために、多くの基本的な三角関数を使用して計算します。以下では、クリップパスを使用して、誰もが見ることができるように円、楕円、および通常のポリゴンを描画します。

描画を開始する前に、次の2つの点に注意してください。

クリップパスを使用して同じ方向から描画します。時計回りに描画する場合は常に時計回りであり、ポリゴンは連続した線分であるため、反時計回りは常に反時計回りです。線分が互いに交差する場合、領域領域は次のようになります。差し引かれます。起こります（もちろん、これが必要な効果であれば問題ありません）。

描画時に「比例」方式で描画する場合は、あらかじめ長さと幅を設定しておく必要があります。そうしないと、描画する長さと幅と想像力との間にギャップが生じる可能性があります。「ピクセル」描画を使用する場合は、このような問題はありません。。

クリップパスは、円、楕円、角丸長方形（挿入図）などの固有名詞属性値を使用して、いくつかの単純なグラフィックを簡単に描画できます。

1.楕円


div.item_cont .item:nth-child(8){
	clip-path:ellipse(25% 50% at 50% 50%);
	background: #C4C4C4;
}

2.サークル

div.item_cont .item:nth-child(7){
	background: #00CCCE;
    clip-path:circle(50% at 50% 50%);
}

3.角丸長方形

div.item_cont .item:nth-child(9){
	clip-path:inset(20% 0 round 0 20%);
	background: #9A99FF;
}

もちろん、（ポリゴン）を使用してポリゴンを描画することもできます。

1.五芒星、視覚座標点：

div{
	width: 200px;
	height: 200px;
	background: url(../jsbase/瀑布流/picture/9.jpg) no-repeat center / cover;
	margin: 10px;
	clip-path: polygon(100% 39%,66% 32%,50% 3%,32% 32%,0 39%,24% 64%,19% 97%,50% 84%,81% 97%,76% 64%);
}

2.ひし形

div.item_cont .item:nth-child(4){
	clip-path: polygon(100% 50%, 50% 0,0 50%,50% 100%);
	background: url(../jsbase/瀑布流/picture/6.jpg) no-repeat center / cover;
}

3.×

div.item_cont .item:nth-child(5){
	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%);
	background: url(../jsbase/瀑布流/picture/1.jpg) no-repeat center / cover;
	animation-duration: 2s;
}

4.五芒星

div.item_cont .item:nth-child(6){
	clip-path:polygon(50% 0%, 63% 38%, 100% 38%, 69% 59%, 82% 100%, 50% 75%, 18% 100%, 31% 59%, 0 38%, 37% 38%);
	background: url(../jsbase/瀑布流/picture/8.jpg) no-repeat center / cover;
}

5.三角形

div.item_cont .item:nth-child(1){
	clip-path: polygon(100% 100%,50% 0,0 100%);
	background: url(../jsbase/瀑布流/picture/1.jpg) no-repeat center / cover;
	animation-duration: 1s;
	clip-path: rec;
}

div.item_cont .item:nth-child(2){
	clip-path: polygon(100% 0,0 100%,100% 100%);
	background: url(../jsbase/瀑布流/picture/2.jpg) no-repeat center / cover;
	animation-duration: 4s;
}

6.プロンプトボックス

div.item_cont .item:nth-child(10){
	clip-path:polygon(0% 0%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
	background: url(../jsbase/瀑布流/picture/1.jpg) no-repeat center / cover;
	animation-duration: 1.2s;
}

もちろん、css3アニメーションを組み合わせて動かすこともできます。

参照：クリップパスを使用した純粋なCSS形状変換

CSSクリップパス