当前位置：首页 > CSS

css 制作旗帜

2026-03-11 16:47:42CSS

CSS 制作旗帜的方法

使用CSS可以创建各种风格的旗帜效果，以下是几种常见实现方式：

水平条纹旗帜

通过线性渐变实现经典的水平条纹效果：

css 制作旗帜

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    to bottom,
    #FF0000 33%,
    #FFFFFF 33% 66%,
    #0000FF 66%
  );
}

垂直条纹旗帜

调整渐变方向创建垂直条纹：

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    to right,
    #008751 40%,
    #FFFFFF 40% 60%,
    #CE1126 60%
  );
}

对角线条纹旗帜

使用角度参数创建斜向条纹：

css 制作旗帜

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    135deg,
    #000000 50%,
    #FF0000 50%
  );
}

带图案的旗帜

结合伪元素添加旗帜图案：

.flag {
  position: relative;
  width: 300px;
  height: 200px;
  background: #002868;
}

.flag::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 50%;
  background: 
    repeating-linear-gradient(
      to bottom,
      #FFFFFF,
      #FFFFFF 7.7%,
      #BF0A30 7.7%,
      #BF0A30 15.4%
    );
}

动画旗帜效果

添加简单的飘动动画：

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

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(to bottom, #DA291C, #DA291C);
  animation: wave 3s infinite;
  transform-origin: bottom left;
}

这些方法可以根据需要调整颜色、尺寸和方向，创建不同国家的旗帜样式。对于更复杂的旗帜设计，可能需要组合多个HTML元素和CSS属性来实现。