前言
通过本文的学习,你将会学到
- 认识并学习css属性
clip-path的一些用法 - 配合过渡和动画创建好玩的交互
Clip-path 认识
1. 介绍
clip-path 是 CSS 的一个属性，它允许你定义一个剪裁区域，用于裁剪元素的显示区域。这个剪裁区域可以是基本形状、SVG 路径、或是外部图像等。被裁剪的元素只会显示在定义的剪裁区域内，超出部分会被隐藏。
2. 用法
clip-path 的基本语法列表：
圆形（circle）
代码语言：javascript复制clip-path: circle(radius at center);示例：
代码语言：javascript复制clip-path: circle(50px at 50% 50%);椭圆形（ellipse）
代码语言：javascript复制clip-path: ellipse(rx ry at cx cy);示例：
代码语言：javascript复制clip-path: ellipse(50% 50% at 50% 50%);多边形（polygon）
代码语言：javascript复制clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);示例：
代码语言：javascript复制clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);内置形状（inset）
代码语言：javascript复制clip-path: inset(top right bottom left);示例：
代码语言：javascript复制clip-path: inset(10% 20% 30% 40%);SVG 路径（path）
代码语言：javascript复制clip-path: path('SVG path data');示例：
代码语言：javascript复制clip-path: path('M10 10 H 90 V 90 H 10 L 10 10');URL 引用（url）
代码语言：javascript复制clip-path: url(#clipPathId);示例：
代码语言：javascript复制clip-path: url(#myClipPath);none（无剪切路径）
代码语言：javascript复制clip-path: none;3. 基本形状
3.1 圆形 (circle)
代码语言：javascript复制 img {
width: 200px;
height: auto;
object-fit: cover;
border-radius: 10px;
/* 添加过渡 */
transition: 0.5s;
/* 初始状态 */
clip-path: circle(100%);
}
img:hover {
cursor: pointer;
clip-path: circle(50%);
}上面的例子会将 图片 裁剪成一个圆形，圆心位于元素的中心，半径为元素的宽度或高度的一半。
效果如下:
3.2 椭圆 (ellipse)
代码语言：javascript复制 img {
width: 500px;
height: auto;
object-fit: cover;
border-radius: 10px;
/* 添加过渡 */
transition: 0.5s;
/* 初始状态 */
clip-path: ellipse(100% 100% at 50% 50%);
}
img:hover {
cursor: pointer;
clip-path: ellipse(50% 50% at 50% 50%);
}当鼠标悬停在图像上时，剪切区域变为一个椭圆形，水平和垂直半径变为图像尺寸的 50%
悬浮之后进行裁剪属性值的变化
3.3 矩形
inset 形状用于创建一个矩形剪切区域，类似于内边距（padding）。
语法:
代码语言：javascript复制clip-path: inset(top right bottom left);示例
代码语言：javascript复制 img {
width: 500px;
height: auto;
object-fit: cover;
transition: 0.5s;
/* 初始状态 */
clip-path: inset(0 0 0 0)
}
img:hover {
cursor: pointer;
clip-path: inset(10% 20% 30% 40%);
}效果:
初始状态(clip-path: inset(0 0 0 0))
代码语言：javascript复制 -------------------------
| |
| |
| |
| 图像未裁剪 |
| |
| |
| |
------------------------- 
悬停状态 (clip-path: inset(10% 20% 30% 40%))
代码语言：javascript复制 -------------------------
| |
| -------- | 10%
| | | |
| 40% | | 20% |
| |裁剪区域| |
| | | |
| -------- | 30%
| |
------------------------- 裁剪区域距离图像顶部 10%，右侧 20%，底部 30%，左侧 40%。因此，裁剪区域显示图像的中心部分，四周有一定的内边距。
3.4 多边形 (polygon) [重要]
clip-path 的 polygon 用法允许我们创建一个多边形的剪切区域。我们可以使用一系列的顶点来定义这个多边形，每个顶点由一个 x 和 y 坐标值表示，坐标值可以是像素、百分比或其他单位。
语法
代码语言：javascript复制clip-path: polygon(x1 y1, x2 y2, x3 y3, ...);-
x和y坐标：可以是百分比或像素值，表示顶点的位置。百分比是相对于元素的尺寸。 - 多边形顶点顺序：按顺时针或逆时针顺序定义顶点，最后一个顶点会自动连接到第一个顶点。 当然，我可以用 Markdown 和文本描述来画出基本形状的坐标图，并提供相应的 CSS 代码。
- 三角形
(50% 0%)
/
/
/
(0% 100%)(100% 100%)clip-path: polygon(50% 0%, 0% 100%, 100% 100%);- 五边形
(50% 0%)
/
(0% 38%) (100% 38%)
/
/
(18% 100%)(82% 100%)clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);- 六边形
(25% 0%) (75% 0%)
/
/
(0% 50%) (100% 50%)
/
/
(25% 100%) (75% 100%)clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);- 矩形
(0% 0%)------------(100% 0%)
| |
| |
| |
(0% 100%)----------(100% 100%)clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);- 平行四边形
(25% 0%)------------(75% 0%)
(0% 100%)----------(50% 100%)clip-path: polygon(25% 0%, 75% 0%, 50% 100%, 0% 100%);示例代码
代码语言：javascript复制<style>
.shape {
width: 300px;
height: 300px;
background: url('your-image-url.jpg') no-repeat center/cover;
margin: 20px;
}
.triangle {
clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.pentagon {
clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
}
.hexagon {
clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.rectangle {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}
.parallelogram {
clip-path: polygon(25% 0%, 75% 0%, 50% 100%, 0% 100%);
}
</style>
<div style="display: flex; gap: 1rem;">
<div class="shape triangle"></div>
<div class="shape pentagon"></div>
<div class="shape hexagon"></div>
<div class="shape rectangle"></div>
<div class="shape parallelogram"></div>
</div>效果:
3.5 使用 SVG 路径
你可以使用 path() 函数来定义一个 SVG 路径作为剪裁区域。
.element {
clip-path: path('M 10 10 H 90 V 90 H 10 L 10 10');
}上面的例子会将 .element 裁剪成一个使用 SVG 路径定义的形状。
相应资源网站推荐
bennettfeely.com/clippy/
