当前位置：首页 > CSS

用css制作国旗

2026-04-02 00:20:58CSS

使用CSS制作国旗

制作国旗通常需要利用CSS的布局和样式特性，以下是几种常见国旗的实现方法：

法国国旗（三色竖条）

法国国旗由蓝、白、红三个垂直等宽的色条组成。可以通过Flexbox或Grid布局实现：

.flag-france {
  display: flex;
  width: 300px;
  height: 200px;
}

.blue {
  flex: 1;
  background-color: #0055A4;
}

.white {
  flex: 1;
  background-color: #FFFFFF;
}

.red {
  flex: 1;
  background-color: #EF4135;
}

<div class="flag-france">
  <div class="blue"></div>
  <div class="white"></div>
  <div class="red"></div>
</div>

日本国旗（白底红圆）

日本国旗由一个白色矩形和居中红色圆形组成，可以用伪元素或绝对定位实现：

.flag-japan {
  width: 300px;
  height: 200px;
  background-color: white;
  position: relative;
}

.flag-japan::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 120px;
  height: 120px;
  background-color: #BC002D;
  border-radius: 50%;
}

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

美国国旗（星条旗）

美国国旗较为复杂，需要条纹和星星的组合。条纹可以用重复线性渐变，星星需要额外元素：

.flag-usa {
  width: 380px;
  height: 200px;
  position: relative;
  background: 
    /* 红白条纹 */
    linear-gradient(
      to bottom,
      #BB133E 0%, #BB133E 7.69%,
      white 7.69%, white 15.38%,
      #BB133E 15.38%, #BB133E 23.08%,
      white 23.08%, white 30.77%,
      #BB133E 30.77%, #BB133E 38.46%,
      white 38.46%, white 46.15%,
      #BB133E 46.15%, #BB133E 53.85%,
      white 53.85%, white 61.54%,
      #BB133E 61.54%, #BB133E 69.23%,
      white 69.23%, white 76.92%,
      #BB133E 76.92%, #BB133E 84.62%,
      white 84.62%, white 92.31%,
      #BB133E 92.31%, #BB133E 100%
    );
}

/* 蓝色星区 */
.flag-usa::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 53.85%;
  background-color: #002147;
}

星星需要额外HTML元素或使用SVG嵌入，此处略去具体实现。

印度国旗（三色横条+轮子）

印度国旗由橙、白、绿三横条和中间的蓝色轮子组成：

用css制作国旗

.flag-india {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
}

.saffron {
  flex: 1;
  background-color: #FF9933;
}

.white {
  flex: 1;
  background-color: #FFFFFF;
  position: relative;
}

.green {
  flex: 1;
  background-color: #138808;
}

/* 中间的轮子需要额外元素或使用SVG */