How do I create a teardrop in HTML?

html

responsive-design

svg

css

byNikita Barsukov·Jan 7, 2025

To make a teardrop shape using CSS, apply border-radius specifying values and make use of transform for the teardrop slant:

.teardrop {
  width: 100px; /* Width of the tear - not responsive to onions */
  height: 150px; /* Height of the tear - varies based on the emotional intensity */
  background: blue; /* Deep oceanic blue tears */
  border-radius: 50% 50% 50% 50%/60% 60% 40% 40%; /* Drama of the tear unfolding */
  transform: rotate(45deg); /* The fall - rotation imitates life, doesn't it? */
}

HTML:

<div class="teardrop"></div>

Modify the width, height, and border-radius fittingly.

If you seek greater control over the curves and a solution that scales well, you may prefer using inline SVG.

<svg width="120px" height="160px" viewbox="0 0 120 160" xmlns="http://www.w3.org/2000/svg">
  <path d="M60,10 Q90,60 60,130 A40,40 0 1,1 60,130 Q30,60 60,10z" fill="blue"/>
</svg>

In this SVG code, we use quadratic bezier curve commands (Q) and an arc command (A) for molding the top and bottom curves.

CSS method and versatility of SVG for crafting shapes

The CSS method is swift and straightforward. However, if you require precision and versatility, SVG has the upper hand. Let's compare:

Scalability

SVG shapes are resolution-independent and provide clean visuals at any size – an indispensable trait when dealing with responsive design.

Shape control

SVG's <path/> allows for exact control over the teardrop's curves, due to the use of bezier curves and arc commands.

Cross-browser compatibility

SVG has broad browser support, reaching back till IE 9. Double-checking compatibility is prudent, especially when dealing with legacy systems.

Efficient performance

Incorporating SVG directly within the HTML reduces additional HTTP requests, marginally improving the site's performance.

Convenient code maintenance

SVG typically leads to less code and a clearer shape definition, simplifying updates and maintenance.

Code walkthrough for CSS and SVG methods

Here's a quick run through creating a teardrop shape using both methods:

Creating a teardrop with CSS

.teardrop {
    width: 100px;
    height: 150px;
    background: blue; /* Because our teardrop likes to cosplay as the ocean sometimes */
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%!important; /* Curviness matters */
}

In this code:

The width and height influence the size of your teardrop.
The background defines the color.
border-radius is employed to set the shape and contour of our teardrop.

Crafting a teardrop with SVG

<svg viewBox="0 0 120 160" xmlns="http://www.w3.org/2000/svg">
  <path d="M60,10 Q90,60 60,130 A40,40 0 1,1 60,130 Q30,60 60,10z" fill="blue"/>
</svg>