To draw a semi-circle using HTML and CSS, Use the ‘border-radius‘ property in combination with a square-shaped container div. Set border-radius to create a circular shape, and then use additional CSS to clip one half, forming a semi-circle.
Approach:
- First create a HTML structure, specifying language and adding a title.
- Enhance visuals by adding a green header with the text “GeeksforGeeks.”
- Apply CSS to centralize content, and style a green semi-circle with border-radius property.
- Position a div in the center using position: absolute and transform: translate(-50%, -50%).
Example:
HTML
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<title>Semi Circle</title>
<style>
* {
margin: 0;
padding: 0;
background-color: white;
text-align: center;
margin-top: 10px;
}
/* Using the border-radius property
to draw the semi-circle*/
div {
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
height: 100px;
width: 200px;
border-radius: 150px 150px 0 0;
background-color: green;
}
</style>
</head>
<body>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<h3>Drawing a semi circle</h3>
<div></div>
</body>
</html>
|
Output:
CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.
Article Tags :
Recommended Articles