css制作粽子

2026-02-13 01:30:48CSS

使用CSS绘制粽子图形

通过CSS的clip-path和伪元素可以实现简单的粽子形状，结合渐变颜色模拟粽叶纹理。以下是一个基础实现方案：

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

.zongzi {
  width: 120px;
  height: 160px;
  background: #8B4513;
  position: relative;
  clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
}

.zongzi::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #A0522D,
    #A0522D 5px,
    #8B4513 5px,
    #8B4513 10px
  );
  clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
  opacity: 0.7;
}

添加立体效果

通过阴影和旋转增强立体感：

.zongzi {
  transform: rotate(15deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  margin: 50px auto;
}

制作绳子装饰

使用伪元素添加绑绳效果：

.zongzi::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 100px;
  background: #F5DEB3;
  top: 30px;
  left: 50px;
  transform: rotate(30deg);
  border-radius: 10px;
}

动画效果（可选）

添加悬停时的轻微晃动动画：

css制作粽子

.zongzi:hover {
  animation: swing 0.5s ease-in-out infinite alternate;
}

@keyframes swing {
  from { transform: rotate(10deg); }
  to { transform: rotate(20deg); }
}

完整代码示例

<!DOCTYPE html>
<html>
<head>
<style>
.zongzi {
  width: 120px;
  height: 160px;
  background: #8B4513;
  position: relative;
  clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
  transform: rotate(15deg);
  box-shadow: 5px 5px 15px rgba(0,0,0,0.3);
  margin: 50px auto;
}

.zongzi::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: repeating-linear-gradient(
    45deg,
    #A0522D,
    #A0522D 5px,
    #8B4513 5px,
    #8B4513 10px
  );
  clip-path: polygon(50% 0%, 80% 50%, 50% 100%, 20% 50%);
  opacity: 0.7;
}

.zongzi::after {
  content: "";
  position: absolute;
  width: 20px;
  height: 100px;
  background: #F5DEB3;
  top: 30px;
  left: 50px;
  transform: rotate(30deg);
  border-radius: 10px;
}

.zongzi:hover {
  animation: swing 0.5s ease-in-out infinite alternate;
}

@keyframes swing {
  from { transform: rotate(10deg); }
  to { transform: rotate(20deg); }
}
</style>
</head>
<body>
<div class="zongzi"></div>
</body>
</html>

可以通过调整颜色值、尺寸比例和阴影参数来获得更逼真的效果。对于更复杂的粽子样式，建议结合SVG实现。