Click here to Skip to main content
65,938 articles
CodeProject is changing. Read more.
Articles / web / HTML5

How to create different shapes in html using css

4.60/5 (9 votes)
3 Nov 2015CPOL 33.9K  
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

 

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

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

 

Triangle

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

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

 

Oval

<code>.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></code>

 

The amazing moon

 

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

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

 

 Leaf

 

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

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

 

Points of Interest

With css you can do amazing things...

Happy coding.....

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)