css制作粽子

使用CSS绘制粽子

通过CSS的clip-path属性和伪元素可以创建一个简单的粽子形状。以下是一个基础实现方案：

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

.zongzi {
  width: 120px;
  height: 180px;
  background-color: #8B4513; /* 粽叶颜色 */
  position: relative;
  clip-path: polygon(
    50% 0%, 80% 10%, 
    100% 40%, 100% 60%,
    80% 90%, 50% 100%,
    20% 90%, 0% 60%,
    0% 40%, 20% 10%
  );
}

.zongzi::before {
  content: "";
  position: absolute;
  top: 10%;
  left: 25%;
  width: 50%;
  height: 80%;
  background: #F5DEB3; /* 糯米颜色 */
  clip-path: polygon(
    50% 0%, 80% 20%,
    100% 50%, 80% 80%,
    50% 100%, 20% 80%,
    0% 50%, 20% 20%
  );
}

添加绑绳细节

通过伪元素添加粽子的绑绳效果：

.zongzi::after {
  content: "";
  position: absolute;
  top: 30%;
  left: 10%;
  width: 80%;
  height: 20%;
  background: #DAA520;
  transform: rotate(45deg);
  border-radius: 5px;
}

动画效果（可选）

添加悬浮动画让粽子更有趣：

.zongzi:hover {
  transform: rotate(5deg) scale(1.05);
  transition: all 0.3s ease;
}

多粽子排列

通过flex布局创建多个粽子的展示：

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

.zongzi-container {
  display: flex;
  gap: 30px;
  justify-content: center;
}

.zongzi:nth-child(2) {
  transform: rotate(15deg);
}

.zongzi:nth-child(3) {
  transform: rotate(-10deg);
}

响应式调整

添加媒体查询适应不同屏幕：

@media (max-width: 600px) {
  .zongzi {
    width: 80px;
    height: 120px;
  }
}

这些CSS技巧可以组合使用，通过调整颜色、尺寸和形状参数，可以创建不同风格的粽子图形。实际应用中可根据需要添加阴影、渐变等效果增强立体感。