css制作红旗

2026-01-28 01:34:57CSS

使用CSS制作红旗

通过CSS的linear-gradient和transform属性可以创建倾斜的红旗效果。以下是一个简单的实现方法：

css制作红旗

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

.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    135deg,
    #de2910 0%,
    #de2910 50%,
    #ffde59 50%,
    #ffde59 100%
  );
  transform: skewY(-10deg);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

添加五角星装饰

要在红旗上添加五角星，可以使用伪元素和CSS clip-path：

css制作红旗

.flag::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  background: #ffde59;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

动画效果

为红旗添加飘动动画：

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

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

响应式调整

确保红旗在不同屏幕尺寸下保持比例：

.flag {
  width: 80vw;
  height: calc(80vw * 2/3);
  max-width: 500px;
  max-height: 333px;
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
.flag {
  width: 300px;
  height: 200px;
  background: linear-gradient(
    135deg,
    #de2910 0%,
    #de2910 50%,
    #ffde59 50%,
    #ffde59 100%
  );
  transform: skewY(-10deg);
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  position: relative;
  margin: 50px auto;
  animation: wave 3s ease-in-out infinite;
  transform-origin: bottom center;
}

.flag::before {
  content: "";
  position: absolute;
  top: 30px;
  left: 30px;
  width: 60px;
  height: 60px;
  background: #ffde59;
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

@keyframes wave {
  0% { transform: skewY(-10deg); }
  50% { transform: skewY(-5deg); }
  100% { transform: skewY(-10deg); }
}
</style>
</head>
<body>
<div class="flag"></div>
</body>
</html>

标签: css