How to create a teardrop in HTML?

Spread the love

Sometimes, we want to create a teardrop in HTML.

In this article, we’ll look at how to create a teardrop in HTML.

How to create a teardrop in HTML?

To create a teardrop in HTML, we can create an SVG.

For instance, we write

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

to create an SVG with the path attribute set to the path that renders the shape of a teardrop.

We set the stroke and stroke-width so we can see the teardrop’s outline.

Conclusion

To create a teardrop in HTML, we can create an SVG.

Leave a Reply

Your email address will not be published. Required fields are marked *