How to create a teardrop in HTML and CSS ?

Last Updated : 31 Dec, 2023

In this article, we will see how to create a teardrop in HTML and CSS. We have used two approaches one with only CSS using the border-radius property and the other with SVG where the path can include a bezier curve to create the teardrop having more control with curves.

Table of Content

Using border property
Using SVG element

Using border property

In HTML create an empty div with class teardrop.
In the class set the appropriate colors and then width and height according to the design you are looking for.
Now set the border radius of the top-left, bottom-left, and bottom-right to 50% and then rotate it anticlockwise to 45deg using the transform property to get the teardrop.
This approach is not flexible enough to change the teardrop curves as you can only change the border-radius values.

Example: The bellow example illustrates a teardrop in only in CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title> 
      Creating a teardrop using CSS 
    </title> 
    <style> 
        .container { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        .teardrop { 
            border-top-left-radius: 70%; 
            border-bottom-left-radius: 55%; 
            border-bottom-right-radius: 70%; 
            transform: rotate(-45deg); 
            border: 1px solid rgb(11, 151, 245); 
            background-color: rgba(0, 255, 255, 0.363); 
            box-shadow: rgb(55, 78, 102) 0px 15px 25px -10px; 
            width: 100px; 
            height: 100px; 
            margin: 50px; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>GeeksforGeeks</h1> 
        <h3>Creating a teardrop 
            using CSS</h3> 
        <div class="teardrop"></div> 
    </div> 
</body> 
  
</html>

Output:

Using SVG element

In HTML add an SVG with attribute width, viewbox.
In the svg create a path with stroke-width and fill color.
The path will contain 2 bezier curves and one arc. The left and the right curve of the teardrop starting with Q are the bezier curves and the bottom curve starting with A is the arc.
This approach is flexible any you can change the teardrop curves as much as your required.

Example: The bellow example illustrates a teardrop using SVG & CSS.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport"
          content="width=device-width, 
                   initial-scale=1.0"> 
    <title>Teardrop using SVG</title> 
    <style> 
        .container { 
            display: flex; 
            flex-direction: column; 
            align-items: center; 
        } 
  
        h1 { 
            color: green; 
        } 
  
        svg path { 
            fill: rgb(100, 192, 235); 
            stroke: rgba(31, 55, 189, 0.438); 
            stroke-width: 0.5; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="container"> 
        <h1>GeeksforGeeks</h1> 
        <p>Creating a teardrop using SVG</p> 
        <svg width="10%" viewbox="0 0 30 42"> 
            <path 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> 
    </div> 
</body> 
  
</html>