How to Create a Teardrop in HTML

How do I create a teardrop in HTML?

SVG approach:

You can achieve the double curve easily with an inline SVG and the <path/> element instead of the <polygon/> element which doesn't allow curved shapes.

The following example uses the <path/> element with:

2 quadratic bezier curve commands for the 2 top curves (lines beginning with Q)
1 arc command for the big bottom one (line beginning with A)

<svg width="30%" viewbox="0 0 30 42">  <path fill="transparent" stroke="#000" stroke-width="1.5"        d="M15 3           Q16.5 6.8 25 18           A12.8 12.8 0 1 1 5 18           Q13.5 6.8 15 3z" /></svg>

How to create a teardrop/water drop filling using css and javascript

The best way to approach the problem is with SVG graphic so create it dynamically

<div class="box"><svg width="100%" viewbox="0 0 50 42">  <path class="tear"        d="M15 6           Q 15 6, 25 18           A 12.8 12.8 0 1 1 5 18           Q 15 6 15 6z" /></svg>  </div>

Create a teardrop like css shape without rotation and with an image as background

You can use an img instead of background-image and counteract the rotation with transform: rotate(-45deg):

.figure {
  width: 180px;
  height: 180px;
  border: 1px solid #32557f;
  border-radius: 0 50% 0% 50%;
  transform: rotate(45deg);
  bottom: -50px;
  position: relative;
  left: 17px;
  overflow: hidden;
}

img {
  height: 142%;
  transform: rotate(-45deg) translateY(-39%);
}

<div class="figure">
  <img src="https://images.unsplash.com/photo-1593642634315-48f5414c3ad9" />
</div>

Filling Tear Drop Css3

I have used shorthand for border-radius and the other changes which i have made is for pseudo element

doubled the size of the pseudo element.
position the pseudo element at the center
positioned it at the bottom of the element with transform: translate(-100%, 10%) rotate(45deg);
In keyframes i am moving the pseudo element to the top

  #drop {  margin: 100px auto;  width: 300px;  height: 300px;  border-radius: 50% 0 50% 50%;  -webkit-transform: rotate(-45deg);  z-index: 99;  position: relative;  background: #fff;  border: 1px solid #e74c3c;  overflow: hidden;}
#drop::before {  content: '';  position: absolute;  background: #e74c3c;  height: 200%;  width: 200%;  transform: translate(-100%, 10%) rotate(45deg);  top: 50%;  left: 50%;  transform-origin: center;  animation: wipe 5s cubic-bezier(.2, .6, .8, .4) forwards infinite;}
@keyframes wipe {  0% {    transform: translate(-100%, 10%) rotate(45deg);  }  100% {    transform: translate(-50%, -50%) rotate(45deg);  }

<div id="drop"></div>

How can we make this shape using CSS

With CSS you can achieve that.

Just create ::after and ::before pseudoelements and the main box rotate 45 degrees. You can adjust the degrees on the linear-gradient part instead of "to right" sentence.

This trick is necessary because border-image and border-radius can't live both on the same element.

You can see more about this:

Possible to use border-radius together with a border-image which has a gradient?
https://css-tricks.com/examples/GradientBorder/

.shape {  position:relative;  width: 100px;  border-radius: 100% 100% 100% 0;  height: 100px;  transform: rotate(45deg);  margin: 0 auto;  background: white;  background-clip: padding-box;}.shape::after {    position: absolute;    top: -8px;     bottom: -8px;    left: -8px;     right: -8px;    background: linear-gradient(to right, #fe3870, #fc5d3e);    content: '';    z-index: -1;    border-radius: 100% 100% 100% 0;}.shape::before {    position: absolute;    top: 8px;     bottom: 8px;    left: 8px;     right: 8px;    background: white;    content: '';    z-index: 1;    border-radius: 100% 100% 100% 0;}

<div class="shape"></div>

d3js svg water droplet or teardrop

I would just use a simple path and change its size and position with transforms:

var svg = d3.select('body').append('svg').attr({width: 400, height: 400});
var dropPath = 'M 243.44676,222.01677 C 243.44676,288.9638 189.17548,343.23508 122.22845,343.23508 C 55.281426,343.23508 1.0101458,288.9638 1.0101458,222.01677 C 1.0101458,155.06975 40.150976,142.95572 122.22845,0.79337431 C 203.60619,141.74374 243.44676,155.06975 243.44676,222.01677 z';
var data = d3.range(300).map(function(){ return Math.random()/3; });
svg.selectAll('g.drop').data(data) .enter().append('g') .attr({  'class': 'drop',   transform: function(d, i){   return 'translate('+[Math.random()*300, Math.random()*300]+') scale('+d+')';  } }) .append('path').attr({d: dropPath})

svg g.drop path{  stroke: blue;  stroke-width': 3px;  fill: skyblue;  fill-opacity: 0.3;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>