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

马黑黑

<style> #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; } </style> <div id="ma"> <div class="son"></div> </div> <script> let tt = 12; Array.from({length: tt}).forEach((d,k) => { 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); }); </script>

马黑黑

核心：

        .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:31
核心：

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

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

红影

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

红影

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

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

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

这样就得到各个旋转后图案的随机色了

花飞飞

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

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

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

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

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

花飞飞

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

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

马黑黑

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

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

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

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

马黑黑

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

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

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

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

马黑黑

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

...

对

马黑黑

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

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

马黑黑

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

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

马黑黑

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

红影

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

谢谢

红影

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

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

红影

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

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

马黑黑

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

对。边框可以只是参照。

马黑黑

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

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

马黑黑

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

不客气