How to Create a Teardrop in HTML

The best way of creating a teardrop is to use SVG, which helps to specify vector-based graphics.

If you want to have a double curve, simply use inline SVG and a <path/> element.

Let’s see how to do this.

Create HTML

Use a <svg> element and specify the width and viewbox attributes.
Add a <path/> element and specify the fill, stroke, and stroke-width attributes.
Add the d attribute to specify the path that should be drawn.
Use two quadratic bezier curve commands (lines starting with Q) for the two top curves.
Use an arc command (line starting with A) for the bottom.

Example of creating a teardrop:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
  </head>
  <body>
    <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>
  </body>
</html>

Try it Yourself »

Result

There are three commands that can be used to create smooth curves. These are two Bezier curves and an "arc". There are many Bezier curves, but only two of them are available in <path> elements: a cubic curve (C) and a quadratic curve (Q).

In our example, we used the quadratic curve, which is simpler than the cubic one. We only need a control point specifying the slope of the curve at both the starting and ending points. And arcs are used to create pieces of circles or ellipses.

In such cases, using SVG offers some advantages such as curve control, fill control, stroke control, time to build and maintain the shape, no HTTP request, and so on.