Create a variety of different shape shapes with CSS only

Introduced

Today, we're going to learn how to use simple CSS to create different types of planar graphics.

Using code

Rectangular

. rectangle {    width:250px;    height:150px;    Background-color: #6DC75F;} <p></p>

Triangle

. triangleup {            border-left:75px solid transparent;            border-right:75px solid transparent;            border-bottom:150px solid  #6DC75F;            width:0;            height:0;        } <p class= "Triangleup" ></p>

Elliptic

. oval {    width:300px;    height:150px;    Background: #6DC75F;    -moz-border-radius:150px/75px;    -webkit-border-radius:150px/75px;    border-radius:150px/75px;} <p class= "Oval" ></p>

Crescent

. Moon {  width:150px;  height:150px;  border-radius:50%;  box-shadow:15px 15px 0 0 Green;} <p class= "Moon" ></p>

Leaves

. Leaf {    border-radius:5px 300px 3px 300px;    Background: #6DC75F;    width:150px;    height:150px;} <p class= "Leaf" ></p>

Points of interest

CSS allows you to do a lot of amazing things ... I wish you a happy coding!