How to draw an ellipse using CSS ?
In this article, we will learn how to create an ellipse using CSS. To create an ellipse first, we will create a simple rectangle of our desired height and width.
Approach To create Rectangle: In order to create an ellipse of our desired size, we will create a div in HTML and will give it a class named an ellipse. Now we will set the height and width of the div, it will look like a rectangle. We can set the background color as per our choice.
Example: In this example, we are using the above-explained approach.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
/* Setting Height and Width of Rectangle */
.ellipse{
height: 100px;
width: 150px;
background-color: green;
}
</ style >
</ head >
< body >
< div class = "ellipse" ></ div >
</ body >
</ html >
|
Output:
Rectangle
Approach to Create Ellipse from Rectangle: Now to convert this rectangle into an ellipse, we will set the border-radius refers to a very high value (50% to 100%). It refers to the curvature at the corners of the ​shape. The height of the rectangle will be the minor axis of the ellipse and the width will be the major axis.
Example: In this example, we are using the above approach.
HTML
<!DOCTYPE html>
< html >
< head >
< style >
/* Setting Height and Width of Rectangle */
.ellipse{
height: 100px;
width: 150px;
background-color: green;
/* Setting Border Radius */
border-radius: 50%;
}
</ style >
</ head >
< body >
< div class = "ellipse" ></ div >
</ body >
</ html >
|
Output:
Ellipse
Last Updated :
08 May, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...