clip-path裁剪动画演示

马黑黑

马黑黑

一楼代码

1. <style>
   
2.     .clip-box {
   
3.         position: relative;
   
4.         margin: 30px auto;
   
5.         width: 600px;
   
6.         height: 600px;
   
7.         filter: drop-shadow(2px 2px 12px rgba(0,0,0,.5));
   
8.     }
   
9.     .clip-box::before, .clip-box::after {
   
10.         position: absolute;
    
11.         content: '';
    
12.         left: 0;
    
13.         top: 0;
    
14.         width: 100%;
    
15.         height: 100%;
    
16.         background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
    
17.         transition: 2s;
    
18.     }
    
19.     .clip-box::before {
    
20.         clip-path: polygon(0 0,0 100%,100% 100%);
    
21.     }
    
22.     .clip-box::after {
    
23.         left: -1px;
    
24.         width: calc(100% + 1px);
    
25.         height: calc(100% + 1px);
    
26.         clip-path: polygon(0 0,100% 0,100% 100%);
    
27.     }
    
28.     .clip-box:hover::before {
    
29.         clip-path: polygon(0 0,50% 50%,100% 0);
    
30.     }
    
31.     .clip-box:hover::after {
    
32.         clip-path: polygon(50% 50%,0 100%,100% 100%);
    
33.     }
    
34. </style>
    
35. 
    
36. <div class="clip-box"></div>

复制代码

马黑黑

思路：

主元素带两个伪元素，伪元素都切成直角三角形并拼凑在一起构成正方形，刚好能完整覆盖主元素。:hover 交互时，将两个伪元素改切成两个等腰三角形。动画时长2s。

理论上，两个伪元素和主元素应是等宽等高。实操中发现三角形斜面衔接处会有一像素的裂缝，因此::after 多设一像素的宽高，并将left属性设为 -1px，暂且以此法去除裂缝。

还可以直接对主元素动手术：

1. <style>
   
2.     .clip-box {
   
3.         position: relative;
   
4.         margin: 30px auto;
   
5.         width: 600px;
   
6.         height: 600px;
   
7.         background: repeating-linear-gradient(90deg, beige, tan, beige 2%);
   
8.         filter: drop-shadow(2px 2px 12px rgba(0,0,0,.5));
   
9.     }
   
10.     .clip-box:hover {
    
11.         clip-path: polygon(0 0,100% 0,0 100%,100% 100%);
    
12.     }
    
13. </style>

复制代码

红影

这个有意思，两个伪元素实际已经是两个对角线上的三角形拼成的正方形了，鼠标触碰后，变成上下对接的三角了。很有意思的变化

马黑黑

直接切主元素方法也不错，但是，元素被 clip-path 操作后，阴影不再存在，变化过程细节也没有那么丰富

红影

after 里使用了left: -1px;，宽高也各加了1 ，这个没明白，是因为两个三角对不齐么？

红影

background: repeating-linear-gradient(90deg, beige, tan, beige 2%);

这个底图纹路设计也和漂亮

马黑黑

红影 发表于 2025-7-29 13:09
background: repeating-linear-gradient(90deg, beige, tan, beige 2%);

这个底图纹路设计也和漂亮{:4_1 ...

重复性线性渐变的最偷懒的设计方法

马黑黑

红影 发表于 2025-7-29 13:08
after 里使用了left: -1px;，宽高也各加了1 ，这个没明白，是因为两个三角对不齐么？

三楼有解释

马黑黑

红影 发表于 2025-7-29 13:07
这个有意思，两个伪元素实际已经是两个对角线上的三角形拼成的正方形了，鼠标触碰后，变成上下对接的三角了 ...

这是幼儿园小盆友玩积木

红影

马黑黑 发表于 2025-7-29 13:11
重复性线性渐变的最偷懒的设计方法

这个好啊，最容易理解呢

红影

马黑黑 发表于 2025-7-29 13:12
三楼有解释

嗯嗯，看到了。前面回复时还没有

马黑黑

红影 发表于 2025-7-29 13:47
嗯嗯，看到了。前面回复时还没有

后补的

马黑黑

红影 发表于 2025-7-29 13:47
这个好啊，最容易理解呢

它简单哈

红影

马黑黑 发表于 2025-7-29 13:12
这是幼儿园小盆友玩积木

非常有趣味，很吸引人

杨帆

clip-path裁剪不易理解，谢谢马老师经典讲授、演示与分享

马黑黑

杨帆 发表于 2025-7-29 14:43
clip-path裁剪不易理解，谢谢马老师经典讲授、演示与分享

可以去简单教程那里了解一下。

clip-path，顾名思义，就是根据路径对目标对象进行裁剪，可以剪成圆形、椭圆形、矩形、多边形。以圆形为例，我们对一个四四方方的 div 进行裁剪，clip-path: circle(100px);，这样，矩形就以中心点为圆心（可以定义）、以 100px  为半径画一个圆，园内保留，院外切掉。不同的切法有不同的细节规定。

马黑黑

红影 发表于 2025-7-29 13:48
非常有趣味，很吸引人

注意防沉迷

杨帆

马黑黑 发表于 2025-7-29 18:35
可以去简单教程那里了解一下。

clip-path，顾名思义，就是根据路径对目标对象进行裁剪，可以剪成圆形 ...

好的，谢谢老师

红影

马黑黑 发表于 2025-7-29 13:48
后补的

这个补得很及时