How to Draw a Half Moon using HTML and CSS?

How to Draw a Semi-Circle using HTML and CSS ?

Last Updated : 12 Jan, 2024

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:

Screenshot-2023-12-20-115925

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.

How to Draw a Half Moon using HTML and CSS?

L

lakshgoel204

Improve

Article Tags :

Similar Reads

How to Draw a Pentagon using HTML and CSS?

A Pentagon is a 5 sided polygon or geometric shape with 5 internal angles measuring 108 degrees each. The pentagon can be drawn using simple HTML and CSS, the below sections will guide you on how to draw the desired shape. HTML Code: In this section we will create a simple div element using the div

How to Draw a Half Moon using HTML and CSS?

Various shapes can be drawn using HTML and CSS and so is the shape of a Half Moon, This shape can be drawn by manipulating a div element using some CSS Properties. HTML Code: In this section we have a basic div tag. <!DOCTYPE html> <html lang="en"> <head> <meta charset

How to draw a circle using SVG tag in HTML ?

In this article, you will learn about SVG basic shape like circle which is among the different shapes of SVG like <rect>, <line>, <ellipse>, <polygon>, etc. So you can easily draw circles using <circle> tag whose parent tag is SVG tag in HTML. Basically, the <circle

How To Create a Thumbnail Image using HTML and CSS ?

The thumbnail image is used to add a 1px rounded border around the image. A thumbnail is a small size image that represents a larger image. The thumbnail is the image that is displayed as a preview of the video. It is used to represent what the video contains or what it is related to. It is displaye

How to Draw a Trapezium using HTML and CSS ?

A Trapezium is a Quadrilateral which has two parallel and two non-parallel sides. In this article we will create a Trapezium shape using simple HTML and CSS. HTML Code: In this section, we will create a simple element using the HTML div tag. C/C++ Code <!DOCTYPE html> <html lang="en

How to create a shinny button using HTML and CSS ?

Buttons are undoubtedly one of the most important components of any website or app. A button should be designed in such a way that it stands out of the other component so that it is becoming clear to the user where to click and what is the button used for. There are infinite ways in which a button c

How to create a Spotlight Effect using HTML and CSS ?

In this article, we are going to create a spotlight effect over the image when we hover over it. This is mainly based on HTML, CSS and JavaScript. The below steps have to be followed to create this effect. HTML Section: In this section, we will create a container elements for the background image an

How to create a Pie Chart using HTML & CSS ?

A Pie Chart is a type of graph that displays data in a circular shape and is generally used to show percentage or proportional data. The percentage represented in the graph by each category is provided near the corresponding slice of one portion of the pie chart. These charts are very good for displ

How to create a progress bar using HTML and CSS?

The progress bar is an important element in the web, the progress bar can be used for downloading, marks obtained, skill measuring unit, etc. To create a progress bar we can useÂ HTMLÂ andÂ CSS. To make that progress bar responsive you will needÂ JavaScript.In this article, we will learn to create progr

How to Create Badges using HTML and CSS ?

This article will show you how to create a badge using HTML and CSS. Badges are simple and basic components that are used to display an indicator or count a number. This is quite useful for mail count and alerting purposes, among other things. Badges are identical to labels, with the exception that