How to create different shapes in html using css

Introduction

Guys lets learn how to create different types of cool shapes using simple css, and not using image.

Using the code

Ractangle

 

.rectangle {
    width: 250px;
    height: 150px;
    background-color: #6DC75F;
}

<div class="rectangle"></div>

 

Triangle

.triangleUp {
            border-left: 75px solid transparent;
            border-right: 75px solid transparent;
            border-bottom: 150px solid  #6DC75F;
            width: 0;
            height: 0;
        }

<div class="triangleUp"></div>

 

Oval

.oval {
    width: 300px;
    height: 150px;
    background: #6DC75F;
    -moz-border-radius: 150px / 75px;
    -webkit-border-radius: 150px / 75px;
    border-radius: 150px / 75px;
}

<div class="oval"></div>

 

The amazing moon

 

.moon {
  width: 150px;
  height: 150px;
  border-radius: 50%;
  box-shadow: 15px 15px 0 0 green;
}

<div class="moon"></div>

 

 Leaf

 

.leaf {
    border-radius: 5px 300px 3px 300px;
    background: #6DC75F;
    width: 150px;
    height: 150px;
}

<div class="leaf"></div>

 

Points of Interest

With css you can do amazing things...

Happy coding.....