Html – How to create a teardrop in HTML

csscss-shapeshtmlsvg

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

Teardrop shape I need to make with HTML, CSS or SVG

I tried with CSS:

.tear {
  display: inline-block;
  transform: rotate(-30deg);
  border: 5px solid green;
  width: 50px;
  height: 100px;
  border-top-left-radius: 50%;
  border-bottom-left-radius: 50%;
  border-bottom-right-radius: 50%;
}
<div class="tear">
</div>

That turned out really screwed.

And then I tried with SVG:

<svg viewBox="0 100 100">
  <polygon points="50,0 100,70 50,100 0,70"/>
</svg>

It did get the shape, but the bottom part wasn't curved.

Is there a way to create this shape so it can be used in an HTML page?

Best Solution

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:

<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.