Lemon shape (CSS and HTML) - html

Question

This is the shape I want. Can it be done with CSS?
I have created a circle. Here :
(source: 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

lemon and leaves
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>

Answer 2

You should use different border radii for different corners. Also, add transform: rotate(45deg); to rotate it by 45deg.
.lemon {
width: 200px;
height: 200px;
background-color: #FFFA40;
border: 4px solid #FFF150;
border-radius: 20px 140px 40px 140px; /* top right bottom left */
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
position:relative;
top:30px;
}
<div class="lemon"></div>
Bonus
A lemon with twig and leaf.
body {
background-color:#333;
}
.lemon {
width: 200px;
height: 200px;
background-color: #FFFA40;
border: 4px solid #FFF150;
border-radius: 20px 140px 40px 140px;
transform:rotate(45deg);
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
position:relative;
top:145px;
z-index:1;
}
.leaf {
width: 100px;
height: 100px;
background: #11AA11;
border-radius: 5px 100px;
transform:rotate(105deg);
-webkit-transform:rotate(105deg);
-moz-transform:rotate(105deg);
position:relative;
top:-200px;
left:110px;
z-index:3;
}
.twig{
width: 7px;
height: 0px;
border-bottom: 90px solid #A0522D;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
border-bottom-right-radius:4px;
border-bottom-left-radius:4px;
transform:rotate(-10deg);
position:relative;
top:-284px;
left:88px;
z-index:2;
}
<div class="lemon"></div>
<div class="leaf"></div>
<div class="twig"></div>

Answer 3

This is pretty trivial with a pseudo-element for the bottom edge:
.lemon {
background:yellow;
width:200px;
height:150px;
border-radius:50%;
position:relative;
}
.lemon:after {
content:'';
position:absolute;
left:85%;
top:40%;
background:yellow;
width:25%;
height:20%;
border-radius:50%;
}
Sample fiddle here. Obviously you can rotate it to any position you want, ie. transform:rotate(90deg).