65.9K
CodeProject is changing. Read more.
Home

How to create different shapes in html using css

starIconstarIconstarIconstarIcon
emptyStarIcon
starIcon

4.60/5 (9 votes)

Nov 3, 2015

CPOL
viewsIcon

33932

Lets create different types of shapes in html using powerful and amazing 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.....