用 clip-path 镂空元素
本帖最后由 马黑黑 于 2023-6-15 07:19 编辑 <br /><br /><style>#hCode {
padding: 10px;
background: #eee;
}
</style>
<p>clip-path是一刀裁剪，剪掉外面的（即剪裁形状外的区域被剪掉），留里面的（即剪裁形状区域被保留）。如此，用 clip-path 镂空元素按道理是不可以实现的，但事在人为，我们可以通过相关设计达到目的。以下代码能够将元素镂空，关键在于 polygon 的路径设置：<br><br></p>
<pre id="hCode" contentEditable="true">
<style>
.mybox {
width: 400px;
height: 400px;
background: tan;
clip-path: polygon(
<span style="color:red">0 0, 100% 0, 100% 100%, 50% 100%, 50% 95%, 95% 50%,
50% 5%, 5% 50%, 50% 95%, 50% 100%, 0 100%</span>
);
}
</style>
<div class="mybox"></div>
</pre>
<p><br><button id="btnok" type="button" value="运行代码">运行代码</button><br><br></p>
<div id="stage"></div>
<p><br><br>polygon 用于 clip-path 是裁剪出多边形，剪裁点可以无限复杂。本例，设置了11个裁剪点的xy坐标，细细品味就能理解其中的奥秘。<br><br></p>
<p>【附】镂空部分的实体路径，可以替换代码中的红色部分看看效果：<span style="color:red">5% 50%, 50% 5%, 95% 50%, 50% 95%</span></p>
<script>
btnok.onclick = () => {
let val = btnok.value;
stage.innerHTML = val === '运行代码' ? hCode.innerText : '';
btnok.value = btnok.innerText = val === '运行代码' ? '关闭运行' : '运行代码';
}
</script>
原来是从外面到里面折腾一圈再回到外面，就可以镂空了。学习了{:4_187:} 这个是从第三条边开始往里面走的，其实任意一条边开始都可以的吧？ 醉美水芙蓉 发表于 2023-6-15 11:45
老师又有新玩法了吗？
这个是技巧 红影 发表于 2023-6-15 09:35
原来是从外面到里面折腾一圈再回到外面，就可以镂空了。学习了
这就是技巧所在。 红影 发表于 2023-6-15 09:36
这个是从第三条边开始往里面走的，其实任意一条边开始都可以的吧？
都可以。起始点在哪儿，看个人喜欢，到后面能闭合就好（最后一个点和起始点可以不重复，也就是说，最后一个点本来应该就是起点，但可以省略掉）。 找到了11个点，难为想得出来这么复杂的。。我还是抄一抄的好。。{:4_173:} 问好老师，欣赏精彩分享，点赞！{:4_187:} 梦缘 发表于 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
是的
嗯嗯，记下了{:4_204:} 马黑黑 发表于 2023-6-15 22:46
椭圆指令做不了内镂空
看样子对于镂空，只能是点状的连线才行。 红影 发表于 2023-6-15 22:48
看样子对于镂空，只能是点状的连线才行。
polygon最强大，css-doodle的 @shape 属性其实就是用的它 马黑黑 发表于 2023-6-15 22:49
polygon最强大，css-doodle的 @shape 属性其实就是用的它
原来 @shape 里那么多图形，是用这个做出来的呢，学习了{:4_187:} 红影 发表于 2023-6-17 08:23
原来 @shape 里那么多图形，是用这个做出来的呢，学习了
对，@shape 是基于 polygon 的 马黑黑 发表于 2023-6-17 12:19
对，@shape 是基于 polygon 的
嗯嗯，现在可以理解更深一点了{:4_187:}