html - 柠檬形状(CSS 和 HTML)

Question

这就是我想要的形状。可以用CSS来完成吗？我创建了一个圆圈。这里:

_{(来源:pngimg.com)}

<div class="lemon"></div>

CSS :-

.lemon {
   width: 200px; 
   height: 200px;
   background-color: #FFFA40;
   border: 4px solid #FFF150;  
   border-radius: 100px;
   top:20px;
}

Answer 1

柠檬和树叶

body {
  background: rgb(48, 52, 52)
}
.container {
  margin: 0 auto;
  width: 200px;
  position: relative;
}
.leaves {
  width: 7px;
  height: 70px;
  background: #339B00;
  border-radius: 0 0 10px 10px;
  position: absolute;
  left: 50%;
  margin-left: -4px;
  z-index: 1;
}
.leaves:after {
  content: '';
  width: 80px;
  height: 80px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(96deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.leaves:before {
  content: '';
  width: 70px;
  left: 8px;
  height: 70px;
  background: #339B00;
  position: absolute;
  border-radius: 0% 50%;
  transform: rotate(-16deg) skew(21deg, 11deg);
  transform-origin: left top;
  top: 32px;
}
.lemon {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  background: yellow;
  position: absolute;
  transform: rotate(48deg) skew(6deg, 6deg);
  top: 69px;
  left: 50%;
  margin-left: -80px;
}
.lemon:after {
  content: '';
  width: 50px;
  height: 50px;
  background: yellow;
  top: 64%;
  left: 50%;
  position: absolute;
  margin-left: 24px;
  border-radius: 19px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<div class="container">
  <div class="leaves"></div>
  <div class="lemon"></div>
</div>