论坛 › 马黑黑教程专版 › 多个多边形裁剪元素组合的小播样式

马黑黑 发表于 2025-8-20 12:15

多个多边形裁剪元素组合的小播样式

<div class="codebox" data-prev="1">
&lt;style&gt;
        #ma {
                width: 200px;
                height: 200px;
                left: calc(50% - 100px);
                top: calc(50% - 100px);
                hadow(2px 2px 8px gray);
                position: absolute;
        }
        .son {
                inset: 0 0 50% 0;
                background: currentColor;
                clip-path: polygon(80% 0,100% 0,100% 40%,50% 100%,80% 0);
                transform-origin: 50% 100%;
                transform: rotate(var(--a));
                position: absolute;
                --a: 0deg;
        }
&lt;/style&gt;

&lt;div id="ma"&gt;
        &lt;div class="son"&gt;&lt;/div&gt;
&lt;/div&gt;

&lt;script&gt;
        let tt = 12;
        Array.from({length: tt}).forEach((d,k) =&gt; {
                d = document.createElement('div');
                d.classList.add('son');
                d.style.cssText += `
                        color: #${Math.random().toString(16).substring(2,8)};
                        --a: ${360/tt*k}deg;
                `;
                ma.appendChild(d);
        });
&lt;/script&gt;
</div>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

马黑黑 发表于 2025-8-20 12:31

核心：

      .son 宽度为父元素的100%、高度50%，用 inset 属性四个值表示；
      .son 用 clip-path 属性切割成一个多边形，设置旋转原点为 50% 100%，并旋转 --a 个角度；
      .son 对应的HTML元素使用JS批量完成，追加元素时给元素添加 color 属性、给 --a 变量赋值；

新知识点：currentColor

      css 的 currentColor 指当前前景色即当前文本颜色。所谓”当前“，这么找：先找本元素的 color 属性值，没有的话，找本元素的父级 color 属性值，还没有的话，找父元素的父元素要，如此找下去，找到为止，如果最后也没找到，就用浏览器定义的前景色，默认是黑色。

      注意，currentColor 是指 color 属性设置的颜色值， 例如，在 color: red; 语句中，red 就是 currentColor 所要找的。

      本文一楼代码中，.son 的 background 属性，使用的是 currentColor 这个值，它指向最近设置的前景色即 color 的属性的值。JS生成 class="son" 的元素时设置了 color 值，就是为这个 background 中的 currentColor 准备的。

杨帆 发表于 2025-8-20 12:50

又一个崭新的小播按钮诞生了，谢谢马老师精彩分享{:4_190:}

红影 发表于 2025-8-20 15:28

马黑黑 发表于 2025-8-20 12:31
核心：

      .son 宽度为父元素的100%、高度50%，用 inset 属性四个值表示；


儿子的高度是一半，怪不得 clip-path 属性里第一个点80% 0,第三个点以为应该是100% 20%,这里用的40%，因为宽度100%，高度50%，所以第三个点取的是50%的40%，两边就是对称的了。
12个图案，12的取值是算好的吧，只能是12个呢{:4_173:}

红影 发表于 2025-8-20 15:36

第一点取80%，正好需要弄12个去均布，若取70%就重叠了，取90%很多空档。不过90的可以用24个均布{:4_173:}

<style>
        #hy {
                width: 200px;
                height: 200px;
                left: calc(50% - 100px);
                top: calc(50% - 100px);
                shadow(2px 2px 8px gray);
                position: relative;
                top: 100px;
        }
        .hy1 {
                inset: 0 0 50% 0;
                background: currentColor;
                clip-path: polygon(90% 0,100% 0,100% 20%,50% 100%,90% 0);
                transform-origin: 50% 100%;
                transform: rotate(var(--a));
                position: absolute;
                --a: 0deg;
        }
</style>

<div id="hy">
        <div class="hy1"></div>
</div>

<script>
        let tt = 24;
        Array.from({length: tt}).forEach((d,k) => {
                d = document.createElement('div');
                d.classList.add('hy1');
                d.style.cssText += `
                        color: #${Math.random().toString(16).substring(2,8)};
                        --a: ${360/tt*k}deg;
                `;
                hy.appendChild(d);
        });
</script>

红影 发表于 2025-8-20 15:45

马黑黑 发表于 2025-8-20 12:31
核心：

      .son 宽度为父元素的100%、高度50%，用 inset 属性四个值表示；


"JS生成 class="son" 的元素时设置了 color 值，就是为这个 background 中的 currentColor 准备的。

这样就得到各个旋转后图案的随机色了{:4_187:}

花飞飞 发表于 2025-8-20 16:32

马黑黑 发表于 2025-8-20 12:31
核心：

      .son 宽度为父元素的100%、高度50%，用 inset 属性四个值表示；


刚想跟贴问问currentColor;这新的是什么颜色，就看到这楼有专解。。

这有意思的，看了想笑，颜色值不是固定的，是四处找呀找到的。。
就像是一个人因牙疼吃了布洛芬一样，到处敲门问：头，你疼不疼，脚，你疼不疼，最后牙齿说是我才是你要找的。{:4_170:}

那这里color: #${Math.random().toString(16).substring(2,8)};设的随机色，它就五彩缤纷的显示了。

花飞飞 发表于 2025-8-20 16:37

transform-origin: 50% 100%;裁好形状之后，旋转点设为下方中点，

transform: rotate(var(--a));
旋转角度是变量--a，开始是0，接下来角度变化由--a: ${360/tt*k}deg;计算得出，tt设为几就进行均分。。
这神奇的计算方法，又想多点一些赞了。{:4_173:}

马黑黑 发表于 2025-8-20 17:59

花飞飞 发表于 2025-8-20 16:37
transform-origin: 50% 100%;裁好形状之后，旋转点设为下方中点，

transform: rotate(var(--a));


这是很简单的算法了，其实就是简单数学运算的应用而已。

圆分为360等分，你有 tt 个元素要去圆里等分布局，就是 360 / tt 然后乘以序号（序号从 0 开始），就这么简单。

马黑黑 发表于 2025-8-20 18:01

花飞飞 发表于 2025-8-20 16:32
刚想跟贴问问currentColor;这新的是什么颜色，就看到这楼有专解。。

这有意思的，看了想笑，颜色值不 ...

对。每一个 .son 的房间里如果都有布洛芬，那就用自己的布洛芬，不用去找爸爸妈妈爷爷奶奶的房间了。

currentColor 关键字是当前颜色，眼下有了就用它，没有才往上找父辈的

马黑黑 发表于 2025-8-20 18:02

红影 发表于 2025-8-20 15:45
"JS生成 class="son" 的元素时设置了 color 值，就是为这个 background 中的 currentColor 准备的。

...

对

马黑黑 发表于 2025-8-20 18:04

红影 发表于 2025-8-20 15:36
第一点取80%，正好需要弄12个去均布，若取70%就重叠了，取90%很多空档。不过90的可以用24个均布
...

定位顶点使用哪儿的都行，关键在于你希望得到的最终图形能不能超出父元素边框。如果必须保持在父元素边框之内，则定位顶点必须不能大于宽高中最小尺寸的值

马黑黑 发表于 2025-8-20 18:06

红影 发表于 2025-8-20 15:28
儿子的高度是一半，怪不得 clip-path 属性里第一个点80% 0,第三个点以为应该是100% 20%,这里用的40%，因 ...

我这个取定位顶点是父元素右上角。polygon的定位定位顶点可以根据需要、兼顾方便设计。

马黑黑 发表于 2025-8-20 18:06

杨帆 发表于 2025-8-20 12:50
又一个崭新的小播按钮诞生了，谢谢马老师精彩分享

{:4_191:}

红影 发表于 2025-8-20 22:04

马黑黑 发表于 2025-8-20 18:02
对

谢谢{:4_187:}

红影 发表于 2025-8-20 22:05

马黑黑 发表于 2025-8-20 18:04
定位顶点使用哪儿的都行，关键在于你希望得到的最终图形能不能超出父元素边框。如果必须保持在父元素边框 ...

嗯嗯，要在父元素的范围里做文章。

红影 发表于 2025-8-20 22:06

马黑黑 发表于 2025-8-20 18:06
我这个取定位顶点是父元素右上角。polygon的定位定位顶点可以根据需要、兼顾方便设计。

嗯嗯，其实不去利用边框，直接画也行的。

马黑黑 发表于 2025-8-21 12:20

红影 发表于 2025-8-20 22:06
嗯嗯，其实不去利用边框，直接画也行的。

对。边框可以只是参照。

马黑黑 发表于 2025-8-21 12:21

红影 发表于 2025-8-20 22:05
嗯嗯，要在父元素的范围里做文章。

也可以突破容器元素的边框

马黑黑 发表于 2025-8-21 12:21

红影 发表于 2025-8-20 22:04
谢谢

不客气

查看完整版本: 多个多边形裁剪元素组合的小播样式