用 CSS 绘制台湾国旗

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

CSS

我使用与@alvaromontoro相同的方法创建了台湾国旗的基本背景：红色背景色，左上角有一个蓝色矩形。

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

太阳报

好了，最简单的部分完成了。现在是真正的交易的时候了。太阳照在旗帜上。

看起来相当复杂，有12根梁，中心有一个圆。如何使用伪元素 ::before 和 ::after 来绘制它们？感觉只有 Clip-path: path() 是唯一的方法，因为 path() 可以绘制我们想要的任何形状。然而，clip-path:path()有一个致命的缺点：它没有响应！这意味着如果我选择这种方法，旗帜只能有一种尺寸。

我开始在谷歌上搜索许多台湾国旗的 SVG 文件。我注意到他们只使用 2 个元素来代表太阳。

1. 一颗白色十二光束星
2. 带有蓝色边框的白色圆圈

当圆圈放在星星的中心时。看起来有 12 根光束围绕着圆圈，并具有所需的间隙。太聪明了！看起来设计师们已经想出了这种绘制太阳的巧妙方法。通过采用这种方法，我可以使用 ::before 作为圆圈，使用 ::after 作为星号。

12光束星

很容易找到台湾国旗的SVG文件。不幸的是，所有的星星都是由path()绘制的。这是因为 path() 在真实的

这是一个非常困难的问题。我最终的解决方案真的是计算12束星所有点的所有位置吗？我利用这个出色的在线 SVG 路径编辑器 https://yqnn.github.io/svg-path-editor/ 来可视化路径中的所有点。

我问我亲爱的数学很好的兄弟，其余的点的位置是什么。他用mathematica解了12个线性方程并得到了所有分数！ ？

然后，我返回到路径编辑器，绘制星星的轮廓作为路径，并对其进行缩放，使其处于 100*100 的范围内。

然后我将所有位置转换为百分比，因为它已经在 100*100 范围内。结果，我们可以在旗帜上显示星星

<div role="img" aria-label="Flag of Taiwan" class="flag taiwan"></div>

圈子

圈子相对来说比较容易。然而，我的第一次尝试是使用边框。失败是因为边框的宽度只能是px。我改为使用径向渐变。棘手的部分是径向渐变的百分比需要是元素的对角线，因此它还需要一些数学运算，但这并不难。

.flag.taiwan {
  aspect-ratio: 3 / 2;
  height: 500px;
  position: relative;
  background: linear-gradient(rgb(19, 53, 129) 0 0) 0 0 / 50% 50% no-repeat,
    rgb(205, 44, 36);
}

结果

完整的 CSS 是

&::after {
    content: '';
    position: absolute;
    top: 6.25%;
    left: 12.5%;
    width: 25%;
    height: calc(3 / 8 * 100%);
    background: white;
    clip-path: polygon(50% 0%,56.6987% 25%,75% 6.6987%,68.3013% 31.6987%,93.3013% 25%,75% 43.3013%,100% 50%,75% 56.6987%,93.3013% 75%,68.3013% 68.3013%,75% 93.3013%,56.6987% 75%,50% 100%,43.3013% 75%,25% 93.3013%,31.6987% 68.3013%,6.6983% 75%,25% 56.6987%,0% 50%,25% 43.3013%,6.6983% 25%,31.6987% 31.6987%,25% 6.6983%,43.3013% 25%);;
  }

您还可以在下面查看我在 codepen 上的工作

希望你喜欢！