How do I create a teardrop in HTML?

by

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>

SVG is a great tool to make this kind of shapes with double curves. You can check this post about double curves with an SVG/CSS comparison. Some of the advantages of using SVG in this case are:

  • Curve control
  • Fill control (opacity, color)
  • Stroke control (width, opacity, color)
  • Amount of code
  • Time to build and maintain the shape
  • Scalable
  • No HTTP request (if used inline like in the example)

Browser support for inline SVG goes back to Internet Explorer 9. See canIuse for more information.

Leave a Comment

tech