CSS 数据类型 <basic-shape> 定义了用于 clip-path、shape-outside 和 offset-path 等属性的不同形状。
可能的值
- inset（） - 表示一个插入矩形。
- circle（） - 表示具有给定半径和位置的圆。
- ellipse（） - 表示具有给定半径和位置的椭圆。
- polygon（） - 通过将多边形的顶点定义为坐标和SVG填充规则来表示多边形。
- path（） - 使用SVG路径数据和SVG填充规则定义自定义剪辑路径。
语法
clip-path: inset( <length-percentage>{1,4} [ round <`border-radius`> ]? )
clip-path: circle( <shape-radius>? [ at <position> ]?);
clip-path: ellipse([ <shape-radius>{2} ]? [ at <position> ]?);
clip-path: polygon( <fill-rule>? [ <shape-arg> <shape-arg> ]# );
clip-path: path( [ <fill-rule>, ]? <string> );
<basic-shape>的计算值
<basic-shape> 函数按指定方式计算值，但以下情况除外：
- 省略的值将包含在内，并使用其默认值进行计算。
- 在 circle（） 或 ellipse（） 中，<position> 值由左上角原点的一对偏移量（水平和垂直）确定，每个偏移量都指定为绝对长度和百分比的组合。
- Inset（） 将 <border-radius> 值计算为所有八个 <length> 或百分比值的扩展列表。
<basic-shape>的插值
在两个 <basic-shape> 元素之间制作动画时，插值遵循规则，其中 shape 函数中的值作为包含 <length>、<percentage> 或 calc（） 元素的列表进行插值。如果列表值不是这些类型，但相同，则将进行插值。
- 两个形状的参考框必须相同。
- 当两个形状都属于同一类型（例如 ellipse（） 或 circle（），并且没有一个半径使用最接近侧或最远侧关键字时，则在形状函数中的每个值之间进行插值。
- 如果两个形状都是 inset（） 类型，则在形状函数中的它们的值之间进行插值。
- 当两个形状均为 polygon（） 类型，具有相等数量的顶点，并使用相同的 <填充规则>时，在其形状函数中的值之间进行插值。
- 当两个形状属于同一 path（） 类型，并且具有相同数量和相同顺序的路径数据命令类型时，将每个路径数据命令插值为实数。
- 在任何其他情况下，不使用插值。
CSS <basic-shape> - inset（）
以下示例演示了 clip-path： inset（10% 10% 10% 10% 10% round 10px 10px） 属性，该属性创建一个带有圆角的正方形 -
<html>
<head>
<style>
.clip-inset {
width: 150px;
height: 150px;
background-color: red;
clip-path: inset(10% 10% 10% 10% round 10px 10px);
}
</style>
</head>
<body>
<div class="clip-inset"></div>
</body>
</html>
CSS <basic-shape> - circle（）
以下示例演示了如何使用 clip-path： circle（50% at 50% 50%） 属性，该属性的半径为元素大小的 50%。−
<html>
<head>
<style>
.clip-circle {
width: 150px;
height: 150px;
background-color: red;
clip-path: circle(50% at 50% 50%);
}
</style>
</head>
<body>
<div class="clip-circle"></div>
</body>
</html>
CSS <clip-path> - ellipse（）
以下示例演示了 clip-path： ellipse（75px 40px at 50% 40%） 属性，该属性创建一个椭圆形状 -
<html>
<head>
<style>
.clip-ellipse {
width: 150px;
height: 150px;
background-color: red;
clip-path: ellipse(75px 40px at 50% 40%);
}
</style>
</head>
<body>
<div class="clip-ellipse"></div>
</body>
</html>
CSS <clip-path> - polygon（）
以下示例演示了 clip-path： polygon（） 属性，该属性创建带有坐标的多边形剪辑路径 -
<html>
<head>
<style>
.clip-polygon {
width: 150px;
height: 150px;
background-color: red;
clip-path: polygon(50% 2.4%, 34.5% 33.8%, 0% 38.8%, 25% 63.1%, 19.1% 97.6%, 50% 81.3%, 80.9% 97.6%, 75% 63.1%, 100% 38.8%, 65.5% 33.8%);
}
</style>
</head>
<body>
<div class="clip-polygon"></div>
</body>
</html>
CSS <clip-path> - path（）
以下示例演示了将clip-path属性与path（）一起使用，以使用SVG路径数据定义自定义剪辑路径 -
<html>
<head>
<style>
.clip-area {
width: 150px;
height: 150px;
background-color: red;
clip-path: path('M 150 150 L 0, 100 L 200,100 z');
}
</style>
</head>
<body>
<div class="clip-area"></div>
</body>
</html>
CSS 动画多边形
以下示例演示如何使用 @keyframes at-rule 对形状进行动画处理，以及形状的过渡。clip-path 属性有助于将形状从一种形式更改为另一种形式。
<html>
<head>
<style>
.clip-polygon {
width: 150px;
height: 150px;
background: blue;
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
animation: 4s poly infinite alternate ease-in-out;
}
@keyframes poly {
from {
clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0% 50%, 40% 40%);
}
to {
clip-path: polygon(50% 30%, 100% 0%, 70% 50%, 100% 100%, 50% 70%, 0% 100%, 30% 50%, 0% 0);
}
}
</style>
</head>
<body>
<div class="clip-polygon"></div>
</body>
</html>
