We can use CSS to draw all kinds of basic shapes like square, rectangle, circle, oval and triangle.
When drawing shapes, I usually use <div> elements. The <div> HTML element is the generic container for flow content. It has no effect on the content or layout until styled in some way using CSS.
CSS Shapes
<div id="square"></div><div id="rectangle"></div><div id="circle"> <div id="circle-inside"></div> <!-- A circle inside a circle --></div><div id="oval"></div><div id="triangle"></div>#square { width: 100px; height: 100px; background: black;}#rectangle { width: 200px; height: 100px; background: black;}#circle { width: 100px; height: 100px; border-radius: 50%; background: black;}#circle-inside { /* relative to the parent */ width: 50%; height: 50%; position: relative; top: 25%; left: 25%; border-radius: 50%; background: red;}#oval { width: 200px; height: 100px; border-radius: 100px / 50px; background: black;}