User Id :    Password :      New Member   Forgot Password  
 
How to create shapes in css
Description Lets create different types of shapes with powerful and amazing css   No. of Views     2183
  Rating     0
Author Najmul Hoda   Posted On     15 Oct 2015
Tags HTML,Style Sheet,HTML5    

Sample Code   Download Code

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

 

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>

 

 

Enjoy guys... stay in touch for more cool stuffs..

 

About Author

About Author He is a team lead, having 8+ years of experience. He loves writing technical article for .Net developers. Najmul Hoda
No Photo
 
Country United States
Company BirlaSoft
Home Page http://www.magixchat.com

Rate this article

Rating options from poor, fair, good, very good to excelent.  
 

Comments

   
Write your comment here.
Comment
Verification Code