css 制作 旗帜

使用 CSS 制作旗帜

水平条纹旗帜（如法国国旗）

通过 linear-gradient 或直接使用 div 元素堆叠实现水平条纹旗帜效果。

.flag-horizontal {
  width: 300px;
  height: 200px;
  display: flex;
  flex-direction: column;
}
.stripes-horizontal {
  flex: 1;
}
.stripe-blue { background-color: #0055A4; }
.stripe-white { background-color: #FFFFFF; }
.stripe-red { background-color: #EF4135; }

<div class="flag-horizontal">
  <div class="stripes-horizontal stripe-blue"></div>
  <div class="stripes-horizontal stripe-white"></div>
  <div class="stripes-horizontal stripe-red"></div>
</div>

垂直条纹旗帜（如加拿大国旗）

通过 flex-direction: row 实现垂直排列。

.flag-vertical {
  width: 300px;
  height: 200px;
  display: flex;
}
.stripes-vertical {
  flex: 1;
}

<div class="flag-vertical">
  <div class="stripes-vertical stripe-red"></div>
  <div class="stripes-vertical stripe-white"></div>
  <div class="stripes-vertical stripe-red"></div>
</div>

斜向条纹旗帜

使用 linear-gradient 实现对角线效果。

.flag-diagonal {
  width: 300px;
  height: 200px;
  background: linear-gradient(45deg, 
    #FF0000 0% 33%, 
    #FFFFFF 33% 66%, 
    #0000FF 66% 100%
  );
}

圆形元素旗帜（如日本国旗）

通过伪元素或绝对定位实现中心圆形图案。

.flag-circle {
  width: 300px;
  height: 200px;
  background-color: #FFFFFF;
  position: relative;
}
.flag-circle::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background-color: #BC002D;
}

动画旗帜效果

添加 animation 属性实现飘动效果。

.flag-animated {
  width: 300px;
  height: 200px;
  background: linear-gradient(90deg, 
    #FF0000 0% 50%, 
    #0000FF 50% 100%
  );
  animation: wave 3s infinite alternate;
}

@keyframes wave {
  0% { transform: skewY(0deg); }
  100% { transform: skewY(10deg); }
}

关键实现要点

• 颜色选择：使用 HEX 或 RGB 值精确匹配旗帜标准色。
• 比例控制：通过 flex 或百分比确保条纹宽度符合实际旗帜比例。
• 响应式设计：使用 vw/vh 单位或媒体查询适配不同屏幕尺寸。
• 复杂图案：结合 clip-path 或 SVG 嵌入实现星形等特殊图案。