How to Draw a Semi-Circle using HTML and CSS ?
A Semi-Circle or a Half-Circle shape can be easily created using HTML and CSS. We will use the border-radius property to draw the desired output.
HTML Code: In this section we will create a simple “div” element using the <div> tag.
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></head> <body> <div></div></body> </html> |
CSS Code: In this section we will first design the “div” box using simple CSS properties and then draw the semi-circle using the border-radius property.
CSS
<style> * { margin: 0; padding: 0; background-color: white; } /* Using the "border-radius" property to draw the semi-circle*/ div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100px; width: 200px; border-radius: 150px 150px 0 0; background-color: green; }</style> |
Final Code: It is the combination of the above two code sections.
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; } /* Using the border-radius property to draw the semi-circle*/ div { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 100px; width: 200px; border-radius: 150px 150px 0 0; background-color: green; } </style></head> <body> <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.
Please Login to comment...