Css制作小旗子

使用CSS制作小旗子

通过CSS的伪元素和变形属性可以轻松创建一个小旗子效果。以下是一个简单的实现方法：

<div class="flag"></div>

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

.flag::before {
  content: "";
  position: absolute;
  left: -10px;
  top: 0;
  width: 0;
  height: 0;
  border-top: 30px solid transparent;
  border-bottom: 30px solid transparent;
  border-right: 10px solid red;
}

添加旗杆效果

为了让旗子更完整，可以添加一个旗杆：

.flag::after {
  content: "";
  position: absolute;
  left: -20px;
  top: 0;
  width: 5px;
  height: 100px;
  background-color: #333;
  z-index: -1;
}

创建波浪形旗子

使用CSS动画可以实现旗子飘动的效果：

.flag {
  position: relative;
  width: 120px;
  height: 80px;
  background-color: #f00;
  border-radius: 0 5px 5px 0;
  animation: wave 3s ease-in-out infinite alternate;
}

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

制作三角旗

另一种风格是制作三角旗：

.triangle-flag {
  width: 0;
  height: 0;
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-bottom: 100px solid blue;
  position: relative;
}

.triangle-flag::after {
  content: "";
  position: absolute;
  left: -5px;
  top: 100px;
  width: 10px;
  height: 150px;
  background-color: #333;
  z-index: -1;
}

这些CSS技术可以组合使用，通过调整颜色、尺寸和动画参数，可以创建各种不同风格的小旗子效果。