纯CSS画标准比例的五星红旗

本文链接：https://blog.csdn.net/uuplay0216/article/details/139922992

周末闲来无事，突然萌生了用css画个五星红旗的想法。本着对国旗和《国旗法》的尊重，国旗自然要按照标准比例去画，不能随随便便画个图就行了。于是，先上网查一下比例和标准色。

某度了一下，《中华人民共和国国旗法》，在这里我找到了依据：五星红旗的长宽比（3:2）、五角星的大小的定位方法和角度。（如图所示）。

但这里并没有给出五星红旗的颜色值，于是继续找，终于在微博上找到一条视频，关于五星红旗的标准画法（传送门），视频中给出了五星红旗红色底色的色值：#ee1c25 ，五角星的黄色色值：#ffff00。好了，准备工作到此就结束，接下来就是用html和css来实现了。

【下载本文源码】

首先：我先在页面中写了下面的容器，这个flag容器就是红旗了。

<div class="flag">
</div>

按照上图的参考线方式，我决定先画国旗的左上角这四分之一的部分。按照3：2的比例，我把它直接定义成宽度300，高度200的一个长方形。设定位置居于屏幕正中。CSS如下：

 /* 现在是四分之一的红旗大小 */
 .flag{
  background:#ee1c25;
  width: 300px; 
  height: 200px;
  position: fixed; 
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  overflow: hidden;
}

接下来，考虑到五星的定位和角度，我需要设置参考线。如上图所示，每行15个小方块，每列10个小方块，利用div的border属性，仅设置小方块的右边和下边。每个小方块的长宽为19像素，加上1像素的边，确保每个小方格是20x20像素。然后把它们放在一个容器里，调整好透明度。具体CSS如下：

/* 参考线的容器 大小与上面做的四分之一红旗大小相等，位置与之完全重叠 */
.flag-line{
  position: absolute;
  margin: 0;
  left: 0;
  top: 0;
  width: 300px;
  height: 200px;
}
/* 150个小方块，构成一个10行15列的表格参考线。 将参考线透明度降低，方便查看 */
.flag-line div{
  position: relative;
  float:left;
  width: 19px;
  height: 19px;
  border:1px solid #fff;
  border-left: 0px;
  border-top:0px;
  margin:0px;
  opacity: 0.3;
}

接下来，看下简单粗暴的页面布局：参考线容器（.flag_line）里面放了150个div。（由于早些年表格的样式控制比较麻烦，所以个人不太习惯用表格，这里使用表格代码更短些，但思路是一样的）

<div class="flag">  
  <div class="flag-line">
    <div ></div>
    <div ></div>
    <div ></div>
      ... <!-- 这里要复制150个div，为了本教程不那么冗长，我就不复制了。 -->      
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>    
  </div>
</div>

好了，参考线完成。这时候，用浏览器打开页面，可以看到，我们的页面中间出现了这样的图：

接下来，我们给页面文档加入五角星。页面结构如下：

<div class="flag">  
  <div class="star"></div>
  <div class="small_star1"></div>
  <div class="small_star2"></div> 
  <div class="small_star3"></div> 
  <div class="small_star4"></div>
  <div class="flag-line">
    <div ></div>
    <div ></div>
    <div ></div>
      ... <!-- 这里要复制150个div，为了本教程不那么冗长，我就不复制了。 -->      
    <div ></div>
    <div ></div>
    <div ></div>
    <div ></div>    
  </div>
</div>

star是大五角星，small_star1、small_star2、small_star3、small_star4，分别是四个小五角星。按从上往下顺序排列。

在css代码区之间，先写下大五角星的CSS样式如下：

.star {
  opacity: 0.7; /* 设置透明度，方便看到五星下面的参考线，这样便于调整位置 */
  position: absolute;
  z-index: 9;
  top:40px; /* 参考图片位置，大五角星顶点距离红旗顶边距离2个格，40px。*/
  left: 42.5px;  
  width: 114.5px; 
  height: 114.5px;
  background-color: #ff0;
  display: inline-block;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );  
}

五角星使用 clip-path属性，10个点，连成一个五角星。借助参考线，参考《国旗法》那个标准图的样子，调整好它的位置和大小。

clip-path属性
是一个CSS属性，允许开发者创建一个剪切区域，从而决定元素的哪些部分可见，哪些部分会被隐藏。通过定义这个剪切路径(clipping path)，可以创造出非矩形的裁剪形状，使元素内容按特定的几何形状展示。clip-path属性的工作原理是通过定义裁剪路径来确定元素的可视区域。这意味着，可以指定一个形状或路径，只有位于这个形状或路径内的部分才会被显示出来，其余部分则会被裁剪掉。这种裁剪可以是简单的几何形状，如圆形、椭圆形或多边形，也可以是复杂的SVG路径。
clip-path属性中包含了多种裁剪函数，如circle()、ellipse()、inset()和polygon()，每种函数都有其特定的用途和语法。例如，circle()用于创建一个圆形裁剪区域，可以指定圆心的位置和半径；ellipse()用于创建一个椭圆形裁剪区域，可以指定椭圆的长轴和短轴的长度以及椭圆的位置；inset()用于创建一个矩形裁剪区域，该矩形是元素边框的内切矩形；而polygon()则用于创建一个多边形裁剪区域，需要指定多边形的各个顶点的位置。

clip-path属性通常用于创建复杂的图形和布局，例如，可以用来创建一个只有部分区域可见的按钮或创建一个独特的图片裁剪效果。此外，clip-path还可以与动画和过渡效果结合使用，创造出更加动态和吸引人的视觉效果。尽管在过去CSS规范中曾经有一个等效的属性clip，但在新的CSS规范中，clip已经被标记为废弃，取而代之的是clip-path属性。

接下来是四个小五星：

.small_star1,
.small_star2,
.small_star3,
.small_star4{
  opacity: 0.7;
  position: absolute;
  transform: rotate(22deg);
  top:20px;
  left: 180px;
  z-index: 9;
  width: 38.2px;
  height: 38.2px;
  background-color: #ff0;
  display: inline-block;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );   
}
.small_star2{
  top: 60px;
  left: 220px;
  transform: rotate(48.5deg);
}
.small_star3{
  top: 120px;
  left: 220px;
  transform: rotate(72.5deg);
}
.small_star4{
  top: 160px;
  left: 180px;
  transform: rotate(22deg);
}

因为没有具体的计算，把浏览器视窗比例放大，用尺子大概对了一下角度，存在少量误差在所难免了，见谅见谅！这时候，我们刷新一下浏览器的网页，页面现在是这样的（刚刚发布的版本，因为有参考线，被系统判定违规了，未想到。现在我把参考线隐藏，重新截图，看一下这个阶段的效果图）：

基本上，实现了我的目标。接下来就是收尾工作：放大红色国旗部分（flag的宽高属性增加一倍），去掉参考线，调整元度透明度。

.flag{
  background:#ee1c25;
  width: 600px; 
  height: 400px;
  position: fixed; 
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  overflow: hidden;
}

完成图就是这样的：

so do，do do do so la si do do，mi do re mi so so... 熟悉的音乐在脑海响起，五星红旗冉冉升起了。

最后，去掉参考线相关的布局代码和css样式，页面完整代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>纯css画标准的五星红旗</title>
<style type="text/css">

body{
  margin:0;
}

.flag{
  background:#ee1c25;
  width: 600px;
  height: 400px;
  position: fixed; 
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);  
  overflow: hidden;
}

.star {
  opacity: 1;
  position: absolute;
  z-index: 9;
  top:40px;
  left: 42.5px;  
  width: 114.5px;
  height: 114.5px;
  background-color: #ff0;
  display: inline-block;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );  
}


.small_star1,
.small_star2,
.small_star3,
.small_star4{
  opacity: 1;
  position: absolute;
  transform: rotate(22deg);
  top:20px;
  left: 180px;
  z-index: 9;
  width: 38.2px;
  height: 38.2px;
  background-color: #ff0;
  display: inline-block;
  clip-path: polygon(
    50% 0%, 
    61% 35%, 
    98% 35%, 
    68% 57%, 
    79% 91%, 
    50% 70%, 
    21% 91%, 
    32% 57%, 
    2% 35%, 
    39% 35%
  );   
}
.small_star2{
  top: 60px;
  left: 220px;
  transform: rotate(48.5deg);
}
.small_star3{
  top: 120px;
  left: 220px;
  transform: rotate(72.5deg);
}
.small_star4{
  top: 160px;
  left: 180px;
  transform: rotate(22deg);
}

</style>
</head>
<body>
<div class="flag">
  <div class="star"></div>
  <div class="small_star1"></div>
  <div class="small_star2"></div> 
  <div class="small_star3"></div> 
  <div class="small_star4"></div> 
</div>
 
</body>
</html>

由于没有进行精确的计算，五角星的位置和大小不是特别精确，强迫症人群不喜勿怪。如有高手能给出精确计算方法，则万分感谢！