How do I create a teardrop in HTML?

Question

How do I create a shape like this to display on a webpage?

I don\'t want to use images since they would get blurry on scaling

Answer 1

SVG approach:

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

The following example uses the 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 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.