クリップパスの描画ポリゴンのCSS

クリップパスは、クリッピングパスを表します

構文クリップパス：<クリップソース> | [<基本形状> || <ジオメトリ-ボックス>] |なし

クリップソース：URL <クリップパス> SVG要素の外部参照、内とすることができる
形状を作成するいくつかの基本的な形状関数：基本的な形状。含むサークル（）、楕円（）、インセット（） とポリゴン（）
ジオメトリ-ボックスは：オプションのパラメータです。このパラメータと基本形状関数と共に使用した場合、ボックスが基本形状の切削加工に関連して提供されてもよいです。
               ジオメトリボックス自体で指定された場合、それは（ボーダー半径によって供給される）は、任意の形状を含む、箱状のカットとして角度を指定されたパスを使用し

例えば。

<スタイル>

  。ボックス{

    幅：500pxなど。

    高さ：500pxなど。

    背景色：水色。

    ボーダー：5pxの灰色の固体。

    クリップパス：ポリゴン（60PX 0、100％0、100％、100％、0〜100％0 70ピクセル）

  }

</スタイル>

 

<身体>

  <DIV CLASS = "箱">

  </ div>

</ BODY>

次のようにクロップ効果は次のとおりです。

 

説明：データ「（）」これらの点を連結するために、時計回りに、ボーダー・ノードは、位置座標クリッピング表す境界の刃先は、領域クリッピングによって囲ま平面図である
原点と、左上隅の座標を

学習サイト：https://www.w3cplus.com/css3/introducing-css-clip-path-property.html