1.簡単な説明
クリップパスのCSSプロパティは、要素全体の一部のみを表示でき（画像全体のクリップ領域の位置を変更せずに）、領域の一部を表示し、領域の外側に非表示にするクリップ領域を作成できます。clip-path属性は、非推奨になったclip属性を置き換えます。clip-pathの属性値は次のいずれかです。
- クリップパス属性値はインセットです;
インセットはクリップパスのような長方形に要素をカットすることです：インセット（10px）、括弧内の値はマージンとパディング値の書き込みに似ています、あなたは値を書くことができます、あなたはもっと書くことができます値。 - clip-path属性値はcircleです
。circleは、要素を円に切り取るためのものです。たとえば、clip-path：circle（100px at 50％50％）、100pxは円の直径、50％50％は円の中心を表します。 - クリップパス属性値は楕円です。
円は楕円などの楕円に要素をカットするものです（150px 100px at 50％50％）。150pxは楕円の水平半径、100pxは楕円の垂直半径、50％50％は楕円の円の中心。 - …
ポリゴン、パス、svgなど、さまざまなクリップパスが存在する場合もあります。詳細リファレンス：クリップパス ;
2.例
例：三角形を描く
.main {
width: 60px;
height: 60px;
background: red;
clip-path: polygon(50% 0,0 100%, 100% 100%);
}
もちろん、以下に示すように、クリップパスジェネレータを使用して、グラフィックをより楽しくカットすることもできます。
3.クリップパス遷移アニメーション
クリップパスもう1つの強力な機能は、CSSトランジションをCSSアニメーションと組み合わせて使用できることです。
例：ポリゴングラフィックアニメーション
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>
clip-path动画-多边形
</title>
<style>
.polygon-animate {
position: absolute;
width: 200px;
height: 200px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: crimson;
animation: polygon-ani 5s linear infinite;
}
@keyframes polygon-ani {
0% {
clip-path: polygon(
50% 0%,
0% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%,
100% 100%
);
}
20% {
background-color: darkorange;
clip-path: polygon(
50% 0%,
100% 50%,
50% 100%,
0% 50%,
0% 50%,
0% 50%,
0% 50%,
0% 50%,
0% 50%
);
}
40% {
clip-path: polygon(
50% 0%,
100% 38%,
82% 100%,
18% 100%,
0% 38%,
0% 38%,
0% 38%,
0% 38%,
0% 38%
);
}
60% {
background-color: lemonchiffon;
clip-path: polygon(
50% 0%,
100% 25%,
100% 75%,
50% 100%,
0% 75%,
0% 25%,
0% 25%,
0% 25%,
0% 25%
);
}
80%,100% {
clip-path: polygon(
50% 0%,
90% 20%,
100% 60%,
75% 100%,
25% 100%,
0% 60%,
10% 20%,
10% 20%,
10% 20%
);
}
}
</style>
</meta>
</head>
<body>
<div class="polygon-animate">
</div>
</body>
</html>
例：グラフィック変換アニメーション
