[分享]css3叶子形状

CSS3中的叶子形状可以使用多种方式实现，以下是其中几种方法。

/* 方法1：使用伪元素*/

.leaf {
  position: relative;
  width: 80px;
  height: 80px;
}

.leaf:before {
  content: ';
  position: absolute;
  bottom: 0;
  left: 0;
  border-radius: 0 0 0 50%;
  width: 50%;
  height: 50%;
  background: green;
  transform-origin: bottom left;
  transform: rotate(-45deg);
}

.leaf:after {
  content: ';
  position: absolute;
  bottom: 0;
  right: 0;
  border-radius: 0 0 50% 0;
  width: 50%;
  height: 50%;
  background: green;
  transform-origin: bottom right;
  transform: rotate(45deg);
}

/* 方法2：使用线性渐变*/

.leaf2 {
  width: 80px;
  height: 80px;
  background: linear-gradient(-45deg, transparent 45%, green 45%, green 55%, transparent 55%);
  transform: rotate(-45deg);
}

/* 方法3：使用clip-path*/

.leaf3 {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  width: 100px;
  height: 100px;
  background: green;
} 

以上3种方法均可实现叶子形状，可以根据实际需要选择适合自己的方法。