css制作粽子

使用CSS绘制粽子

通过CSS的伪元素、边框和变换属性可以绘制一个简单的粽子图形。以下是实现步骤：

HTML结构

<div class="zongzi"></div>

CSS样式

.zongzi {
  width: 100px;
  height: 120px;
  background-color: #8B4513; /* 粽叶颜色 */
  position: relative;
  border-radius: 50% 50% 5% 5%;
  transform: rotate(45deg);
  margin: 50px;
}

.zongzi::before {
  content: "";
  position: absolute;
  width: 90%;
  height: 90%;
  background-color: #F5DEB3; /* 糯米颜色 */
  top: 5%;
  left: 5%;
  border-radius: 50% 50% 5% 5%;
  transform: rotate(-5deg);
}

.zongzi::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 80px;
  background-color: #D2B48C; /* 绳子颜色 */
  top: -30px;
  left: 40px;
  transform: rotate(10deg);
}

添加动画效果

让粽子有轻微的上下浮动效果：

.zongzi {
  animation: float 2s ease-in-out infinite;
}

@keyframes float {
  0%, 100% { transform: rotate(45deg) translateY(0); }
  50% { transform: rotate(45deg) translateY(-10px); }
}

绘制三角形粽子

另一种更简单的三角形粽子实现方式：

.triangle-zongzi {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid #8B4513;
  position: relative;
}

.triangle-zongzi::before {
  content: "";
  position: absolute;
  border-left: 45px solid transparent;
  border-right: 45px solid transparent;
  border-bottom: 90px solid #F5DEB3;
  top: 5px;
  left: -45px;
}

响应式调整

使用CSS变量方便调整粽子大小：

:root {
  --zongzi-size: 100px;
}

.zongzi {
  width: var(--zongzi-size);
  height: calc(var(--zongzi-size) * 1.2);
  /* 其他样式保持不变 */
}

这些CSS技巧可以创建出不同风格的粽子图形，通过调整颜色、尺寸和形状参数，可以获得更丰富的视觉效果。