论坛 › 马黑黑教程专版 › clip-path: polygon()胡乱裁剪

马黑黑 发表于 2023-6-19 12:53

clip-path: polygon()胡乱裁剪

本帖最后由 马黑黑 于 2023-6-19 13:03 编辑 <br /><br /><style>
#mydiv {
        width: 200px;
        height: 200px;
        margin: 30px;
        background: linear-gradient(red,black);
        cursor: pointer;
}
</style>

<p>单击元素开始裁剪，可重复操作：</p>
<div id="mydiv"></div>
<p>clip-path代码：</p>
<div id="msgBox"></div>

<script>

let mkPer = (total,num) => parseInt(num / total * 100) + '%';

let clipBox = (xx,points) => {
        let pathData = [];
        for(let i = 0; i < points; i ++) {
                let x = mkPer(200, Math.random() * xx), y = mkPer(200, Math.random() * xx);
                pathData.push(x + ' ' + y);
        }
        return `polygon(${pathData.join(', ')})`;
}

mydiv.onclick = () => msgBox.innerText = mydiv.style.clipPath = clipBox(200,30);

</script>

马黑黑 发表于 2023-6-19 12:53

本帖最后由 马黑黑 于 2023-6-19 13:04 编辑

代码：
<style>
#mydiv {
        width: 200px;
        height: 200px;
        margin: 30px;
        background: linear-gradient(red,black);
        cursor: pointer;
}
</style>

<p>单击元素开始裁剪，可重复操作：</p>
<div id="mydiv"></div>
<p>clip-path代码：</p>
<div id="msgBox"></div>

<script>

let mkPer = (total,num) => parseInt(num / total * 100) + '%';

let clipBox = (xx,points) => {
        let pathData = [];
        for(let i = 0; i < points; i ++) {
                let x = mkPer(200, Math.random() * xx), y = mkPer(200, Math.random() * xx);
                pathData.push(x + ' ' + y);
        }
        return `polygon(${pathData.join(', ')})`;
}

mydiv.onclick = () => msgBox.innerText = mydiv.style.clipPath = clipBox(200,30);

</script>

梦缘 发表于 2023-6-19 12:55

感谢老师的分享，欣赏问好！{:4_180:}

马黑黑 发表于 2023-6-19 13:01

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

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>

马黑黑 发表于 2023-6-19 13:09

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

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

亚伦影音工作室 发表于 2023-6-19 13:47

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

红影 发表于 2023-6-19 14:59

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

那个已经有了，亚伦老师前面的帖子没看吧{:4_173:}

红影 发表于 2023-6-19 15:00

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

红影 发表于 2023-6-19 15:00

这么奇特的变化，很超乎想象呢{:4_199:}

樵歌 发表于 2023-6-19 16:08

这就是一个万花筒嘛{:4_173:}

南无月 发表于 2023-6-19 18:12

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

马黑黑 发表于 2023-6-19 18:54

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

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

马黑黑 发表于 2023-6-19 18:55

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

晚上好

马黑黑 发表于 2023-6-19 18:55

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

有点点像也有所不是同

马黑黑 发表于 2023-6-19 18:55

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

随机的就大概酱紫

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

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

是的

红影 发表于 2023-6-19 20:21

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

电脑自动绘图{:4_173:}

红影 发表于 2023-6-19 20:21

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

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

马黑黑 发表于 2023-6-19 20:54

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

这才是真正的涂鸦{:4_170:}

马黑黑 发表于 2023-6-19 20:55

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

反正没什么秩序

查看完整版本: clip-path: polygon()胡乱裁剪