用 clip-path 镂空元素

马黑黑

clip-path是一刀裁剪，剪掉外面的（即剪裁形状外的区域被剪掉），留里面的（即剪裁形状区域被保留）。如此，用 clip-path 镂空元素按道理是不可以实现的，但事在人为，我们可以通过相关设计达到目的。以下代码能够将元素镂空，关键在于 polygon 的路径设置：

<style>
.mybox {
	width: 400px;
	height: 400px;
	background: tan;
	clip-path: polygon(
		0 0, 100% 0, 100% 100%, 50% 100%, 50% 95%, 95% 50%,
		50% 5%, 5% 50%, 50% 95%, 50% 100%, 0 100%
	);
}
</style>

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

运行代码

polygon 用于 clip-path 是裁剪出多边形，剪裁点可以无限复杂。本例，设置了11个裁剪点的xy坐标，细细品味就能理解其中的奥秘。

【附】镂空部分的实体路径，可以替换代码中的红色部分看看效果：5% 50%, 50% 5%, 95% 50%, 50% 95%

红影

原来是从外面到里面折腾一圈再回到外面，就可以镂空了。学习了

红影

这个是从第三条边开始往里面走的，其实任意一条边开始都可以的吧？

马黑黑

醉美水芙蓉 发表于 2023-6-15 11:45
老师又有新玩法了吗？

这个是技巧

马黑黑

红影 发表于 2023-6-15 09:35
原来是从外面到里面折腾一圈再回到外面，就可以镂空了。学习了

这就是技巧所在。

马黑黑

红影 发表于 2023-6-15 09:36
这个是从第三条边开始往里面走的，其实任意一条边开始都可以的吧？

都可以。起始点在哪儿，看个人喜欢，到后面能闭合就好（最后一个点和起始点可以不重复，也就是说，最后一个点本来应该就是起点，但可以省略掉）。

南无月

找到了11个点，难为想得出来这么复杂的。。我还是抄一抄的好。。

梦缘

问好老师，欣赏精彩分享，点赞！

马黑黑

梦缘 发表于 2023-6-15 20:04
问好老师，欣赏精彩分享，点赞！

晚上好

红影

马黑黑 发表于 2023-6-15 12:56
这就是技巧所在。

这个用了polygon，所以只能是一个个点去走的吧，不能在内部套用椭圆命令吧？

红影

马黑黑 发表于 2023-6-15 12:58
都可以。起始点在哪儿，看个人喜欢，到后面能闭合就好（最后一个点和起始点可以不重复，也就是说，最后一 ...

哦哦，是自动回到起点的吧。

马黑黑

红影 发表于 2023-6-15 21:45
哦哦，是自动回到起点的吧。

是的

马黑黑

红影 发表于 2023-6-15 21:43
这个用了polygon，所以只能是一个个点去走的吧，不能在内部套用椭圆命令吧？

椭圆指令做不了内镂空

红影

马黑黑 发表于 2023-6-15 22:45
是的

嗯嗯，记下了

红影

马黑黑 发表于 2023-6-15 22:46
椭圆指令做不了内镂空

看样子对于镂空，只能是点状的连线才行。

马黑黑

红影 发表于 2023-6-15 22:48
看样子对于镂空，只能是点状的连线才行。

polygon最强大，css-doodle的 @shape 属性其实就是用的它

红影

马黑黑 发表于 2023-6-15 22:49
polygon最强大，css-doodle的 @shape 属性其实就是用的它

原来 @shape 里那么多图形，是用这个做出来的呢，学习了

马黑黑

红影 发表于 2023-6-17 08:23
原来 @shape 里那么多图形，是用这个做出来的呢，学习了

对，@shape 是基于 polygon 的

红影

马黑黑 发表于 2023-6-17 12:19
对，@shape 是基于 polygon 的

嗯嗯，现在可以理解更深一点了