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.
<!DOCTYPE html> < html >
< head >
<!-- Adding CSS to the div -->
< style >
/* Setting Height and Width of Rectangle */
.ellipse{
height: 100px;
width: 150px;
background-color: green;
}
</ style >
</ head >
< body >
<!-- Create a div -->
< div class = "ellipse" ></ div >
</ body >
</ html >
|
Output:
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.
<!DOCTYPE html> < html >
< head >
<!-- Adding CSS to the div -->
< style >
/* Setting Height and Width of Rectangle */
.ellipse{
height: 100px;
width: 150px;
background-color: green;
/* Setting Border Radius */
border-radius: 50%;
}
</ style >
</ head >
< body >
<!-- Create a div -->
< div class = "ellipse" ></ div >
</ body >
</ html >
|
Output: