clip-path 内切三角形

马黑黑 · 发表于 2025-8-5 23:34

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由马黑黑于 2025-8-6 12:31 编辑

<style> /* 父元素：参照的盒子 */ .pa { margin: 20px auto; width: 300px; height: 300px; border: 1px dashed silver; position: relative; } /* 子元素：切割的盒子 */ .ma { position: absolute; width: 100%; height: 100%; background: radial-gradient(red,tan, purple); /* 剪裁路径走向：先顺时针再逆时针 */ clip-path: polygon( 0 100%, /* 左下角 */ 100% 100%, /* 右下角 */ 0 0, /* 左上角 */ 0 100%, /* 回到左下角 */ 5% 95%, /* 左下角稍上 */ 5% 12.5%, /* 左上角稍下 */ 87.5% 95%, /* 右下角稍上 */ 5% 95% /* 回到左下角稍上 */ ); } </style> <div class="pa"> <div class="ma"></div> </div>

效果：

马黑黑 · 发表于 2025-8-5 23:46

原理：

clip-path实际上不能内切，不论何种形状的切法，它总是将它所规范的形状路线的外层切掉、保留形状路线内的区域。但是，可以通过 path(‘路径') 函数，将路径巧妙设置为可以切掉里边的。这需要双重切割，第一重切外边的，第二重切里边的。核心是第一重和第二重的衔接使用一个零宽直线，这条直线没有宽度，然后又在该直线的末端手动闭合，就可以将里边的割掉（核心代码在 24 行）。另外，还有一个重点，即第二重的走向要和第一重的走向相反，前顺（时针）则后逆（时针），前逆则后顺。

本例，12.5% 和 87.5% 数值的确定是估摸的，没有经过严谨的数学计算，道理上应该计算一下，这里图个简便差不多就行了。