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

clip-path 内切三角形

本帖最后由 马黑黑 于 2025-8-6 12:31 编辑 <br /><br /><div id="cbox" class="codebox" data-title="CSS+HTML代码：">
<txt-green>&lt;!-- clip-path 内切三角形代码 --&gt;</txt-green>
&lt;style&gt;
        <txt-green>/* 父元素 ：参照的盒子 */</txt-green>
        .pa {
                margin: 20px auto;
                width: 300px;
                height: 300px;
                border: 1px dashed silver;
                position: relative;
        }
        <txt-green>/* 子元素 ：切割的盒子 */</txt-green>
        .ma {
                position: absolute;
                width: 100%;
                height: 100%;
                background: radial-gradient(red,tan, purple);
                <txt-green>/* 剪裁路径走向 ：先顺时针再逆时针 */</txt-green>
                clip-path: polygon(
                        0 100%, <txt-green>/* 左下角 */</txt-green>
                        100% 100%, <txt-green>/* 右下角 */</txt-green>
                        0 0, <txt-green>/* 左上角 */</txt-green>
                        0 100%, <txt-green>/* 回到左下角 */</txt-green>
                        5% 95%, <txt-green>/* 左下角稍上 */</txt-green>
                        5% 12.5%, <txt-green>/* 左上角稍下 */</txt-green>
                        87.5% 95%, <txt-green>/* 右下角稍上 */</txt-green>
                        5% 95% <txt-green>/* 回到左下角稍上 */</txt-green>
                );
        }
&lt;/style&gt;

&lt;div class="pa"&gt;
        &lt;div class="ma"&gt;&lt;/div&gt;
&lt;/div&gt;
</div>
<p>效果：</p>
<div id="sbox"></div>

<script type="module">
        import linenum from 'https://638183.freep.cn/638183/web/js/linenum.js';
        linenum();
        sbox.innerHTML = cbox.textContent;
</script>

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

原理：

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

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

花飞飞 发表于 2025-8-6 10:21

5% 12.5%, /* 左下角稍下 */这个说明是左上角稍下？

花飞飞 发表于 2025-8-6 10:26

还可以有零宽度直线，看不见摸不着的，好抽象，
它实际存在，又不存在。
只有路径时有这个特点吧。

花飞飞 发表于 2025-8-6 10:31

这里用了前逆后顺～强调要内外方向相反，同方向会怎样呢，手机中，等电脑时试试。{:4_173:}

红影 发表于 2025-8-6 10:36

想切里面的，同时需要切外面吧。零宽直线，这个词汇很特别 {:4_204:}

红影 发表于 2025-8-6 10:56


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

<div class="papa">
        <div class="mama"></div>
</div>

马黑黑 发表于 2025-8-6 12:29

红影 发表于 2025-8-6 10:36
想切里面的，同时需要切外面吧。零宽直线，这个词汇很特别

大中华词典上有

马黑黑 发表于 2025-8-6 12:29

红影 发表于 2025-8-6 10:56
/* 父元素 ：参照的盒子 */
        .papa {
                margin: 20px auto;


且棱形的相对容易一些，好计算

马黑黑 发表于 2025-8-6 12:30

花飞飞 发表于 2025-8-6 10:31
这里用了前逆后顺～强调要内外方向相反，同方向会怎样呢，手机中，等电脑时试试。

同方向切不出来

马黑黑 发表于 2025-8-6 12:30

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

花飞飞 发表于 2025-8-6 10:21
5% 12.5%, /* 左下角稍下 */这个说明是左上角稍下？
左上角

花飞飞 发表于 2025-8-6 18:02

马黑黑 发表于 2025-8-6 12:30
同方向切不出来

好哒，我就说么规则要遵守{:4_173:}

花飞飞 发表于 2025-8-6 18:04

马黑黑 发表于 2025-8-6 12:30
左上角

这个是你标注的核心行，但我看从外到内转是23行开始的？还是我电脑显示跟你不一样

马黑黑 发表于 2025-8-6 20:51

花飞飞 发表于 2025-8-6 18:04
这个是你标注的核心行，但我看从外到内转是23行开始的？还是我电脑显示跟你不一样

也许有标得不对的地方

红影 发表于 2025-8-6 21:15

马黑黑 发表于 2025-8-6 12:29
大中华词典上有

又是通过黑黑知道的大中华词典上的这个词组{:4_173:}

红影 发表于 2025-8-6 21:16

马黑黑 发表于 2025-8-6 12:29
且棱形的相对容易一些，好计算

是的，朝里的扣的数值取一样的就行。

马黑黑 发表于 2025-8-6 21:17

红影 发表于 2025-8-6 21:16
是的，朝里的扣的数值取一样的就行。

规则多边形容易操作

马黑黑 发表于 2025-8-6 21:18

红影 发表于 2025-8-6 21:15
又是通过黑黑知道的大中华词典上的这个词组

这个可以有

花飞飞 发表于 2025-8-6 21:42

马黑黑 发表于 2025-8-6 20:51
也许有标得不对的地方

是我看错了{:4_173:}

红影 发表于 2025-8-6 21:58

马黑黑 发表于 2025-8-6 21:17
规则多边形容易操作

是的，规则的形状，操作起来也统一。
页: [1] 2
查看完整版本: clip-path 内切三角形