Css制作小旗子

使用CSS制作小旗子

通过CSS的伪元素和变形属性可以轻松创建小旗子效果。以下是两种常见方法：

方法一：使用伪元素和旋转

通过::after伪元素创建三角形旗面，结合旋转实现倾斜效果：

.flag {
  position: relative;
  width: 100px;
  height: 60px;
  background-color: #ff0000;
}

.flag::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 0;
  border-left: 15px solid #ff0000;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
}

.flag-pole {
  width: 4px;
  height: 100px;
  background-color: #888;
  margin-left: 10px;
}

方法二：使用clip-path

通过clip-path直接裁剪出旗子形状，实现更复杂的多边形：

.flag {
  width: 120px;
  height: 80px;
  background: linear-gradient(45deg, red 50%, white 50%);
  clip-path: polygon(
    0% 0%,
    100% 50%,
    0% 100%,
    0% 70%,
    70% 50%,
    0% 30%
  );
  position: relative;
}

添加动态效果

结合CSS动画让旗子飘动：

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

.waving-flag {
  animation: wave 1s infinite;
  transform-origin: left center;
}

国旗条纹样式

对于条纹旗样式（如美国国旗），使用重复渐变：

.striped-flag {
  width: 180px;
  height: 100px;
  background: repeating-linear-gradient(
    to bottom,
    #bb133e,
    #bb133e 10px,
    white 10px,
    white 20px
  );
}

这些方法可以组合使用，通过调整颜色、尺寸和形状参数，能创建各种风格的CSS旗子效果。实际应用时需考虑浏览器兼容性，特别是clip-path属性在旧版浏览器可能需要前缀。