当前位置：首页 > CSS

css 制作旗帜

2026-04-01 12:53:11CSS

CSS 制作旗帜的方法

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

水平条纹旗帜

通过线性渐变或重复背景实现水平条纹效果：

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

垂直条纹旗帜

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

css 制作旗帜

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

斜向条纹旗帜

使用重复线性渐变实现斜纹效果：

.flag {
  width: 300px;
  height: 200px;
  background: repeating-linear-gradient(
    45deg,
    #FF0000,
    #FF0000 10px,
    #FFFFFF 10px,
    #FFFFFF 20px
  );
}

圆形元素旗帜

结合伪元素创建包含圆形元素的旗帜：

css 制作旗帜

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

.flag::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: #FFFFFF;
}

响应式旗帜

使用百分比单位确保旗帜比例不变：

.flag-container {
  position: relative;
  width: 100%;
  padding-bottom: 66.66%; /* 3:2 比例 */
}

.flag {
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(...);
}

动画旗帜效果

添加简单动画使旗帜飘动：

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

.waving-flag {
  animation: wave 3s infinite;
  transform-origin: bottom center;
}

这些方法可以根据需要组合使用，通过调整颜色、尺寸和比例来创建不同国家的旗帜样式。对于更复杂的旗帜图案，可能需要结合多个HTML元素和CSS定位技术来实现。