内部使用剪辑路径 CSS 的不同颜色三角形的六边形多边形

【问题标题】：Hexagon Polygon of different color triangles inside using clip-path CSS内部使用剪辑路径 CSS 的不同颜色三角形的六边形多边形
【发布时间】：2021-07-01 08:41:25
【问题描述】：

我想使用剪辑路径 (CSS) 制作具有不同三角形颜色的以下六边形。

我尝试使用 :polygon(6 坐标) 并通过背景颜色提供颜色（这会产生六边形，但只有一种颜色）。但我无法制作这种不同的颜色。我不知道渐变是否也会起作用。请帮忙谢谢。

【问题讨论】：

标签： css frontend web-frontend clip-path

【解决方案1】：

conic-gradient 可以完成这项工作：

.box {
  width:200px;
  clip-path: polygon(0% 25%,0% 75%,50% 100%,100% 75%,100% 25%,50% 0%);
  background:
    conic-gradient(
       red    0 60deg,
       blue   0 120deg,
       green  0 180deg,
       purple 0 240deg, 
       pink   0 300deg, 
       yellow 0 360deg);
}

.box:before {
  content:"";
  display:block;
  padding-top: 115%; /* 100%/cos(30)  */
}

<div class="box">

</div>

【讨论】：