Css制作小旗子

CSS制作小旗子的方法

使用CSS可以轻松创建各种形状的小旗子，以下是几种常见的实现方式：

基础三角形旗子

通过CSS的border属性创建三角形形状：

.flag {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
}

带旗杆的旗子

结合伪元素创建旗杆效果：

.flag-with-pole {
  position: relative;
  width: 100px;
  height: 60px;
  background-color: red;
}

.flag-with-pole::before {
  content: '';
  position: absolute;
  left: -10px;
  top: 0;
  width: 10px;
  height: 150px;
  background-color: brown;
}

波浪形旗子

使用CSS clip-path属性创建波浪效果：

.wavy-flag {
  width: 120px;
  height: 80px;
  background-color: blue;
  clip-path: polygon(
    0% 0%, 100% 0%, 90% 50%, 100% 100%, 0% 100%, 10% 50%
  );
}

多色条纹旗子

使用线性渐变创建条纹效果：

.striped-flag {
  width: 150px;
  height: 100px;
  background: linear-gradient(
    to bottom,
    red 0%, red 33%,
    white 33%, white 66%,
    blue 66%, blue 100%
  );
}

动画旗子

添加CSS动画让旗子飘动：

.waving-flag {
  width: 150px;
  height: 100px;
  background-color: green;
  animation: wave 2s infinite alternate;
}

@keyframes wave {
  from { transform: skewY(0deg); }
  to { transform: skewY(10deg); }
}

这些方法可以根据需要组合使用，调整颜色、尺寸和形状参数可以创建各种不同风格的旗子效果。