纯CSS实现一片渐变叶子的效果

以下是一个纯CSS实现一片渐变叶子的例子：

HTML代码：

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

CSS代码：

.leaf {
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #5cb85c;
  background: linear-gradient(to bottom, #5cb85c 0%, #4cae4c 100%);
  position: relative;
  transform: rotate(45deg);
}
.leaf:before {
  content: "";
  position: absolute;
  top: -25px;
  left: -25px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-right: 100px solid #5cb85c;
  transform: rotate(-45deg);
}
.leaf:after {
  content: "";
  position: absolute;
  top: -25px;
  left: 25px;
  width: 0;
  height: 0;
  border-top: 50px solid transparent;
  border-bottom: 50px solid transparent;
  border-left: 100px solid #4cae4c;
  transform: rotate(45deg);
}

解释：

这个例子中，我们使用了三个伪元素来实现一片叶子的效果。其中，主要的叶子元素是一个长方形，通过`border`属性来定义了其形状。我们使用了`linear-gradient`属性来实现渐变效果，从上到下从浅绿色渐变到深绿色。通过`transform`属性的`rotate`函数，我们将叶子旋转了45度。

接下来，我们使用了两个伪元素，分别在叶子的左上角和右上角创建了两个三角形，用于填补叶子的两个角落。这两个三角形也是通过`border`属性来定义的，同样使用`transform: rotate()`函数来旋转至正确的位置。

最终的效果如下图所示：