CSS の clip-path プロパティの使用方法の詳細な説明

体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.ポリゴン1 {
  クリップパス: ポリゴン(50% 0px, 100% 100%, 0px 100%)
}

.ポリゴン2 {
  クリップパス: ポリゴン(0px 50%, 50% 0, 100% 50%, 50% 100%)
}

.ポリゴン3 {
  クリップパス: ポリゴン(0% 60%, 20% 0%, 60% 0%, 40% 60%)
}

<div class="fa">
  <p>ポリゴン</p>
  <p>値は複数の座標点で構成されます。最初の値は x 方向、2 番目の値は y 方向です。 </p>
  <p>左上隅が原点、右下隅が点（100%、100%）です。 </p>
  <div class="polygon1"></div>
  <div class="polygon2"></div>
  <div class="polygon3"></div>
</div> 

体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.circle1 {
  クリップパス: 円(50% 50% で 50%)
}

.circle2 {
  クリップパス: 円(70% 50% 50%)
}

.circle3 {
  クリップパス: 円(30% 10% 10%)
}

<div class="fa">
  <p>円</p>
  <p>値は座標点と半径で構成されます。 </p>
  <p>左上隅が原点、右下隅が点（100%、100%）です。 </p>
  <p>半径を定義するときは、at キーワードを使用して座標を定義できます。 </p>
  <div class="circle1"></div>
  <div class="circle2"></div>
  <div class="circle3"></div>
</div> 

体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.楕円1 {
  クリップパス: 楕円(30% 20% 50% 50%)
}

.楕円2 {
  クリップパス: 楕円(20% 30% 50% 50%)
}

.楕円3 {
  クリップパス: 楕円(60% 10% で 10% 10%)
}

<div class="fa">
  <p>楕円</p>
  <p>値は、楕円の X 軸の半径、Y 軸の半径、および配置楕円の座標で構成されます。 </p>
  <p>左上隅が原点、右下隅が点（100%、100%）です。 </p>
  <p>at キーワードは半径と座標を区切ります</p>
  <div class="ellipse1"></div>
  <div class="ellipse2"></div>
  <div class="ellipse3"></div>
</div>

体 {
  背景色: #000;
}

.fa {
  境界線: 1px 実線 #fff;
  色:黄緑;
  パディング: 10px;
  マージン: 10px;
}

.fa>div {
  幅: 110ピクセル;
  高さ: 110px;
  背景色: 黄緑;
  マージン: 20px 自動;
}

.インセット1 {
  クリップパス: インセット(25% 0% 25% 0% 丸め 0% 25% 0% 25%)
}

.インセット2 {
  クリップパス: インセット(0% 25% 25% 0% 丸め 25% 25% 25% 0%)
}

.インセット3 {
  クリップパス: インセット(25% 25% 0% 0% 丸め 0% 25% 0% 25%)
}

<div class="fa">
  <p>インセット</p>
  <p>値は (右上、左下、丸、左上、半径、右上、半径、右下、半径、左下、半径) です。</p>
  <p>round の前の値は距離を表します。最初の値が 25% の場合、画像は上から 25% の位置から描画されることを意味します</p>
  <div class="inset1"></div>
  <div class="inset2"></div>
  <div class="inset3"></div>
</div>