Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Create a Teardrop in HTML?
Creating shapes using HTML and CSS is quite an easy task until the shape is not very complex. A teardrop shape, with its curved bottom and pointed top, requires more advanced techniques than simple geometric shapes. In this tutorial, we will explore two methods to create a teardrop shape: using CSS with border-radius and transform properties, and using SVG for more precise control.
Let's first understand why teardrops are challenging to create with basic HTML elements
They combine both curved and pointed edges
The shape requires asymmetric styling
Proper proportions are crucial for a realistic appearance
Method 1: Using CSS Border-Radius and Transform
The border-radius property allows us to round the corners of elements, while the transform property can rotate and position shapes. By combining these properties, we can create a teardrop-like shape.
CSS Properties Used
Following are the key CSS properties for creating teardrops
border-radius: top-left top-right bottom-right bottom-left; transform: rotate(angle);
The border-radius property accepts up to four values representing each corner. Setting three corners to 50% creates the rounded bottom, while leaving one corner at 0 creates the pointed top.
Example
Following example creates a teardrop shape using CSS properties
<!DOCTYPE html>
<html>
<head>
<title>CSS Teardrop Shape</title>
<style>
body {
margin: 50px;
font-family: Arial, sans-serif;
}
.teardrop {
width: 80px;
height: 80px;
border-radius: 0 50% 50% 50%;
background-color: lightblue;
border: 3px solid darkblue;
transform: rotate(45deg);
margin: 20px;
}
.teardrop-filled {
width: 60px;
height: 60px;
border-radius: 0 50% 50% 50%;
background-color: crimson;
transform: rotate(45deg);
margin: 20px;
}
</style>
</head>
<body>
<h3>CSS Teardrop Shapes</h3>
<div class="teardrop"></div>
<div class="teardrop-filled"></div>
</body>
</html>
The output displays two teardrop shapes with different styling
CSS Teardrop Shapes [Two teardrop shapes: one light blue with dark blue border, one solid crimson]
Method 2: Using SVG Path
SVG (Scalable Vector Graphics) provides precise control over shape creation using path elements. SVG teardrops offer better curves and proportions compared to CSS methods.
SVG Path Commands
Key SVG path commands for creating teardrops
M - Move to point Q - Quadratic Bezier curve A - Arc curve z - Close path
Example Basic SVG Teardrop
Following example creates a teardrop using SVG path element
<!DOCTYPE html>
<html>
<head>
<title>SVG Teardrop Shape</title>
<style>
body {
margin: 30px;
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h3>SVG Teardrop Shape</h3>
<svg width="100" height="120" 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>
The SVG path creates a smooth teardrop with precise curves and a sharp point at the top.
Example Multiple SVG Teardrops
Following example shows various SVG teardrop variations with different colors and sizes
<!DOCTYPE html>
<html>
<head>
<title>Multiple SVG Teardrops</title>
<style>
body {
margin: 30px;
font-family: Arial, sans-serif;
}
.teardrop-container {
display: flex;
gap: 20px;
align-items: center;
}
</style>
</head>
<body>
<h3>SVG Teardrop Variations</h3>
<div class="teardrop-container">
<svg width="80" height="100" viewBox="0 0 30 42">
<path fill="lightcoral" stroke="#8b0000" stroke-width="2"
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>
<svg width="60" height="80" viewBox="0 0 30 42">
<path fill="lightblue" stroke="#000080" 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>
<svg width="100" height="120" viewBox="0 0 30 42">
<path fill="lightgreen" stroke="#006400" stroke-width="2.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>
</div>
</body>
</html>
This creates three teardrops of different sizes and colors displayed side by side.
Comparison of Methods
Following table compares the CSS and SVG approaches for creating teardrops
| CSS Method | SVG Method |
|---|---|
| Simple syntax using border-radius and transform | More complex path syntax with precise control |
| Limited curve control and symmetry | Exact curve control with Bezier and arc commands |
| May appear pixelated when scaled up | Vector-based, maintains quality at any size |
| Good for simple teardrops and quick prototypes | Ideal for detailed, professional-quality teardrops |
| Easier to animate with CSS transitions | Supports complex SVG animations |
Key Points
CSS Method: Use
border-radius: 0 50% 50% 50%andtransform: rotate(45deg)for quick teardrops.SVG Method: Provides superior curve control and scalability using path elements.
Quadratic curves (Q): Create smooth, natural-looking teardrop curves in SVG.
Arc commands (A): Perfect for the rounded bottom portion of the teardrop.
Conclusion
Both CSS and SVG methods can create teardrop shapes in HTML. CSS offers simplicity and quick implementation, while SVG provides precise control and professional quality. Choose CSS for basic teardrops and SVG for detailed, scalable designs that maintain quality across all screen sizes.
599 Views
