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.