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.
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 >
|
Output:
Share your thoughts in the comments
Please Login to comment...