How to Create a Teardrop in HTML?

HTML Web Development Front End Technology

Creating shapes using HTML and CSS is quite an easy task until the shape is not very complex. A <div> class and CSS styling properties like height, width and border can help us create shapes like square, rectangle, circle, triangle etc.

Here is a simple example of making a square shape using HTML and CSS only.

Example

<!DOCTYPE html>
<html>
<head>
    <style>
        body{
            margin:30px;
        }
        .square {
            height: 75px;
            width: 75px;
            background-color: darkcyan;
        }
    </style>
</head>
<body>
    <div class="square"></div>
</body>
</html>

Most of the shapes especially the ones with well-defined edges can be easily created using plain CSS. However, it is quite a task in case of complex shapes since they do not have a well- defined structure.

In this tutorial, we will see the process of creating a teardrop shape using two methodologies- CSS and SVG.

Using CSS

The border-radius and transform properties of CSS make it relatively easier to create complicated shapes.

The radius of the element's corners is specified by the border-radius property. This property can have one to four values depending on the requirement. The values determine the radius of the top-left corner, top-right corner, bottom-left corner and bottom-right corner.

The transform property transforms an element in 2D or 3D. We can use this property to rotate, scale, move, skew, and so on.

Example

In the following example we will create a tear-drop shape using the border-radius and transform properties of CSS.

<!DOCTYPE html>
<html>
<head>
    <title>
        How to Create a Teardrop in HTML?
    </title>
    <style>
        body{
            margin:50px;
        }
        .tearDrop {
           width: 80px;
           height: 80px;
           border-radius: 0 50% 50% 50%;
           border: 5px solid purple;
           transform: rotate(45deg);
        }
    </style>
</head>
<body>
    <div class="tearDrop"></div>
</body>
</html>

Using SVG

SVG stands for Scalable Vector Graphics. They are an XML-based markup language for describing two-dimensional based vector graphics for the web. Every element and property in SVG files can be animated. SVG is a W3C recommendation that integrates with other W3C standards such as DOM and XSL. SVG images and their associated behaviours are defined in XML text files.

The following are the benefits of using SVG over other image formats (such as JPEG and GIF):

Any text editor can be used to create and edit SVG images.
SVG images can be indexed, searched, scripted, and compressed.
SVG images can be scaled.
SVG images can be indexed, searched, scripted, and compressed.
SVG images can be zoomed.
SVG graphics do not lose quality when zoomed or resized.
SVG is an open standard, and SVG files are entirely XML.

The HTML <svg> element is used as a container for SVG graphics. SVG supports a variety of path, box, circle, text, and graphic image drawing methods. The code snippet below explains the concept and application of SVG.

Creating a Circle

Here ‘cx’ and ‘cy’ define the x and y co-ordinates of the centre of the circle and ‘r’ specifies the radius of the circle. The stroke and stroke-width attributes determine how a shape's outline appears and the fill attribute refers to the colour inside the shape.

<svg width="100" height="100">
  <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
</svg>

Example

This example demonstrates the use of SVG to get a better teardrop shape than the CSS method.

<!DOCTYPE html>
<html>
  <head>
    <title>
        How to Create a Teardrop in HTML?
    </title>
    <style>
        body{
            margin:30px;
        }
    </style>
  </head>
  <body>
    <svg width="25%" viewbox="0 0 30 42">
      <path fill="lavenderblush" 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>
  </body>
</html>

To make smooth curves, we can use one of the three commands. There are two Bezier curves and one "arc" here. There are numerous Bezier curves, but only two are available in <path> elements: a cubic curve (C) and a quadratic curve (Q).

In our example, we used a quadratic curve rather than a cubic one. We only need a control point that specifies the slope of the curve at both the beginning and end of the curve. Arcs are also used to make pieces of circles or ellipses.

In these cases, SVG provides benefits such as curve control, fill control, stroke control, time to build and maintain the shape, no HTTP request, and so on.

Eesha Gandhi

Updated on: 11-Sep-2023

84 Views

Kickstart Your Career

Get certified by completing the course

Get Started