clip-path: polygon()胡乱裁剪

马黑黑

单击元素开始裁剪，可重复操作：

clip-path代码：

马黑黑

代码：

1. <style>
   
2. #mydiv {
   
3.         width: 200px;
   
4.         height: 200px;
   
5.         margin: 30px;
   
6.         background: linear-gradient(red,black);
   
7.         cursor: pointer;
   
8. }
   
9. </style>
   
10. 
    
11. <p>单击元素开始裁剪，可重复操作：</p>
    
12. <div id="mydiv"></div>
    
13. <p>clip-path代码：</p>
    
14. <div id="msgBox"></div>
    
15. 
    
16. <script>
    
17. 
    
18. let mkPer = (total,num) => parseInt(num / total * 100) + '%';
    
19. 
    
20. let clipBox = (xx,points) => {
    
21.         let pathData = [];
    
22.         for(let i = 0; i < points; i ++) {
    
23.                 let x = mkPer(200, Math.random() * xx), y = mkPer(200, Math.random() * xx);
    
24.                 pathData.push(x + ' ' + y);
    
25.         }
    
26.         return `polygon(${pathData.join(', ')})`;
    
27. }
    
28. 
    
29. mydiv.onclick = () => msgBox.innerText = mydiv.style.clipPath = clipBox(200,30);
    
30. 
    
31. </script>
    

复制代码

梦缘

感谢老师的分享，欣赏问好！

马黑黑

每一次点击元素，都会随机生成不同的裁剪效果，如果中意，可复制代码用于任意尺寸的正方形元素。举例如下——

CSS:

.mybox {
    width: 400px;
    height: 400px;
    background: pink;
    clip-path: polygon(77% 49%, 46% 75%, 3% 31%, 52% 87%, 24% 91%, 35% 97%, 73% 34%, 3% 40%, 81% 89%, 83% 47%, 38% 18%, 81% 49%, 7% 69%, 44% 7%, 39% 92%, 76% 92%, 61% 69%, 17% 18%, 47% 52%, 38% 99%, 39% 42%, 84% 72%, 9% 69%, 85% 86%, 51% 12%, 78% 39%, 54% 5%, 13% 85%, 53% 39%, 33% 80%);
}

HTML:

<div class="mybox"></div>

马黑黑

二楼代码中，29行调用自定义函数 clipBox(xx, points) 并将执行函数产生的 clip-path 代码显示出来。

clipBox 函数的参数一 xx，指正方形元素宽高，参数二 points 指裁剪点总数（也就是多边形边数）。本例，参数二是 30 ，就是30条边、30个裁剪点。

亚伦影音工作室

整个正规的裁剪效果，例如：六边形，五边形，五角星等，还有实用价值！

红影

亚伦影音工作室 发表于 2023-6-19 13:47
整个正规的裁剪效果，例如：六边形，五边形，五角星等，还有实用价值！

那个已经有了，亚伦老师前面的帖子没看吧

红影

真神奇，点击就是替换随机数吧？

红影

这么奇特的变化，很超乎想象呢

樵歌

这就是一个万花筒嘛

南无月

这是个挺梦幻的空间可以整成长方形象护网一样做背景图覆盖的吧。。

马黑黑

南无月 发表于 2023-6-19 18:12
这是个挺梦幻的空间可以整成长方形象护网一样做背景图覆盖的吧。。

这个我也不知道，随机的出来什么不好确定，满意的别忘了留下代码

马黑黑

梦缘 发表于 2023-6-19 12:55
感谢老师的分享，欣赏问好！

晚上好

马黑黑

樵歌 发表于 2023-6-19 16:08
这就是一个万花筒嘛

有点点像也有所不是同

马黑黑

红影 发表于 2023-6-19 15:00
这么奇特的变化，很超乎想象呢

随机的就大概酱紫

马黑黑

红影 发表于 2023-6-19 15:00
真神奇，点击就是替换随机数吧？

是的

红影

马黑黑 发表于 2023-6-19 18:55
随机的就大概酱紫

电脑自动绘图

红影

马黑黑 发表于 2023-6-19 18:56
是的

可以得到很多意象不到的图案呢。

马黑黑

红影 发表于 2023-6-19 20:21
可以得到很多意象不到的图案呢。

这才是真正的涂鸦

马黑黑

红影 发表于 2023-6-19 20:21
电脑自动绘图

反正没什么秩序