CSS shape something like tea drop - css

Question

I am trying to create this shape ( on the uploaded image ) only with css borders but I have problem with the corners they are not accepting the right shape. May I ask you guys for advice or best practice how to create it ?
Here is my code
.tea-drop {
width: 90px;
height: 25px;
display: block;
background: #000;
border-top-left-radius: 100%;
border-top-right-radius: 60%;
border-bottom-left-radius: 70%;
border-bottom-right-radius: 67%;
}
<div class="tea-drop"></div>

Answer 1

SVG is the recommended way to create such shapes. It offers simplicity and scale-ability.
We can use SVG's path element to create a shape like above and fill it with some solid color, gradient or a pattern.
Only one attribute d is used to define shapes in path element. This attribute itself contains a number of short commands and few parameters that are necessary for those commands to work.
Following code will create above shape:
<path d="M 0,0
C 100,10 120,150 60,75
Z" />
Below is a brief description of path commands used in above code:
M command is used to define the starting point. It appears at the beginning and specify the point from where drawing should start.
Q command is used to draw curves.
Z command is used to close current path. It draws a straight line from current point to the starting point to close the shape.
Output Image:
Working Example:
* {box-sizing: border-box;}
body {
background: linear-gradient(teal, skyblue);
text-align: center;
min-height: 100vh;
padding: 10px;
margin: 0;
}
<svg width="200" height="200" viewBox="0 0 100 100">
<path d="M0,0
C 100,10 120,150 60,75
Z" />
</svg>
This shape can be filled with gradient or pattern as well. <linearGradient> element is used to define a gradient in SVG. This element can then be referenced later using an id attribute to fill or outline any shape.
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="orange" />
<stop offset="1" stop-color="green" />
</linearGradient>
The direction of the gradient is controlled by the x1, y1, x2 and y2 while <stop> elements are used to define colors and their position along the gradient line.
Output Image:
Working Example:
* {box-sizing: border-box;}
body {
background: linear-gradient(teal, skyblue);
text-align: center;
min-height: 100vh;
padding: 10px;
margin: 0;
}
<svg width="200" height="200" viewBox="0 0 100 100">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="orange" />
<stop offset="1" stop-color="green" />
</linearGradient>
</defs>
<path d="M0,0
C 100,10 120,150 60,75
Z" fill="url('#grad')" />
</svg>
We can even apply shadow to this shape using SVG's filters. This article on MDN explains the basics of filters.
Output Image:
Working Example:
* {box-sizing: border-box;}
body {
background: linear-gradient(teal, skyblue);
text-align: center;
min-height: 100vh;
padding: 10px;
margin: 0;
}
<svg width="240" height="240" viewBox="0 0 120 120">
<defs>
<linearGradient id="grad" x1="0" y1="0" x2="1" y2="1">
<stop offset="0" stop-color="orange" />
<stop offset="1" stop-color="green" />
</linearGradient>
<filter id="shadow">
<feGaussianBlur in="SourceAlpha" stdDeviation="3" />
<feMerge>
<feMergeNode />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
</defs>
<path d="M10,10
C 110,20 130,160 70,85
Z" fill="url('#grad')" filter="url('#shadow')" />
</svg>
Useful Resources:
Below are some useful links for SVG:
Specification
MDN

Answer 2

You can use CSS3 to make that.
.tear {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 10em;
height: 10em;
border: none;
-webkit-border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
border-radius: 80% 0 55% 50% / 55% 0 80% 50%;
font: normal 100%/normal Arial, Helvetica, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: clip;
text-overflow: clip;
background: rgb(0,0,0);
-webkit-transform: rotateX(42.5447924299deg) rotateY(100deg) rotateZ(-45.26deg) translateY(1px) ;
transform: rotateX(42.5447924299deg) rotateY(100deg) rotateZ(-45.26deg) translateY(1px) ;
-webkit-transform-origin: 50% 0 0;
transform-origin: 50% 0 0;
}
<div class="tear"></div>
Reference: http://enjoycss.com/SfB
I saved the link, you can customized it for yourself.