当前位置：首页 > CSS

css制作叶子

2026-02-12 19:43:40CSS

使用CSS绘制叶子

通过CSS的border-radius和transform属性可以创建简单的叶子形状。以下是一个基础实现方案：

<div class="leaf"></div>

.leaf {
  width: 100px;
  height: 150px;
  background-color: #4CAF50;
  border-radius: 100% 0;
  transform: rotate(45deg);
}

添加叶脉细节

通过伪元素增加叶脉效果：

css制作叶子

.leaf::before {
  content: "";
  position: absolute;
  width: 10px;
  height: 120px;
  background-color: #388E3C;
  left: 45px;
  top: 15px;
  transform: rotate(45deg);
}

创建锯齿状边缘

使用clip-path制作更复杂的叶边：

css制作叶子

.leaf {
  clip-path: polygon(
    50% 0%,
    70% 20%,
    90% 30%,
    80% 50%,
    90% 70%,
    70% 80%,
    50% 100%,
    30% 80%,
    10% 70%,
    20% 50%,
    10% 30%,
    30% 20%
  );
}

动画效果

添加飘落动画：

@keyframes fall {
  0% { transform: rotate(0deg) translateY(0); }
  100% { transform: rotate(360deg) translateY(500px); }
}

.leaf {
  animation: fall 5s linear infinite;
}

多叶片组合

创建复合叶片：

<div class="compound-leaf">
  <div class="leaflet"></div>
  <div class="leaflet"></div>
  <div class="leaflet"></div>
</div>

.compound-leaf {
  position: relative;
  width: 200px;
  height: 200px;
}

.leaflet {
  position: absolute;
  width: 80px;
  height: 120px;
  background-color: #8BC34A;
  border-radius: 100% 0;
}

.leaflet:nth-child(1) { transform: rotate(0deg); }
.leaflet:nth-child(2) { transform: rotate(120deg); }
.leaflet:nth-child(3) { transform: rotate(240deg); }