Today, technology allows you to create CSS more flexible things. CSS3 has successfully replaces the use of graphics in the design of pages, greatly simplifying and easing the code a web page. Today, with CSS you can create not only a realistic gradients, drop shadows, etc. but also to create different shapes. Most of the following codes are used the possibility of CSS3, so will work on the latest browsers. A distinctive feature of the establishment of such figures is the fact that you use only one tag of HTML. Appointing him to this or that class, you can easily switch the shape created by the shape.
Square
Source code:
Rectangle
Source code:
Range
Source code:
Oval
Source code:
Triangle up
Source code:
The star (6 end)
Source code:
Trapezoid
Source code:
Parallelogram
Source code:
The triangle down to the right
Source code:
Triangle Down Left
Source code:
Triangle top right
Source code:
Triangle top left
Source code:
Right Triangle
Source code:
The triangle to the left
Source code:
The star (5 end)
Source code:
Pentagon
Source code:
Source code:
# square {
width : 100px ;
height : 100px ;
Background : Red ;
}
Rectangle
Source code:
# Rectangle {
width : 200px ;
height : 100px ;
Background : Red ;
}
Range
Source code:
# Circle {
width : 100px ;
height : 100px ;
Background : Red ;
-Moz-border-radius: 50px ;
-Webkit-border-radius: 50px ;
border-radius: 50px ;
}
Oval
Source code:
# Oval {width : 200px ;
height : 100px ;
Background : Red ;
-Moz-border-radius: 100px / 50px ;
-Webkit-border-radius: 100px / 50px ;
border-radius: 100px / 50px ;
}
Triangle up
Source code:
# Triangle-up {
width : 0 ;
height : 0 ;
border-left : 50px Solid transparent ;
border-right : 50px Solid transparent ;
border-bottom : 100px Solid Red ;
}
The star (6 end)
Source code:
# Star-six {
width : 0 ;
height : 0 ;
border-left : 50px Solid transparent ;
border-right : 50px Solid transparent ;
border-bottom : 100px Solid Red ;
position : relative ;
}
# Star-six: after {
width : 0 ;
height : 0 ;
border-left : 50px Solid transparent ;
border-right : 50px Solid transparent ;
border-top : 100px Solid Red ;
position : absolute ;
content : "" ;
top : 30px ;
left : 50px- ;
}
Trapezoid
Source code:
# Trapezoid {
border-bottom : 100px Solid Red ;
border-left : 50px Solid transparent ;
border-right : 50px Solid transparent ;
height : 0 ;
width : 100px ;
}
Parallelogram
Source code:
# Parallelogram {
width : 150px ;
height : 100px ;
-Webkit-transform: skew ( 20 deg);
-Moz-transform: skew ( 20 deg);
-O-transform: skew ( 20 deg);
Background : Red ;
}
The triangle down to the right
Source code:
# Triangle-bottomright {
width : 0 ;
height : 0 ;
border-bottom : 100px Solid Red ;
border-left : 100px Solid transparent ;
}
Triangle Down Left
Source code:
# Triangle-bottomleft {
width : 0 ;
height : 0 ;
border-bottom : 100px Solid Red ;
border-right : 100px Solid transparent ;
}
Triangle top right
Source code:
# Triangle-topright {
width : 0 ;
height : 0 ;
border-top : 100px Solid Red ;
border-left : 100px Solid transparent ;
}
Triangle top left
Source code:
# Triangle-topleft {
width : 0 ;
height : 0 ;
border-top : 100px Solid Red ;
border-right : 100px Solid transparent ;
}
Right Triangle
Source code:
# Triangle- right {
width : 0 ;
height : 0 ;
border-top : 50px Solid transparent ;
border-left : 100px Solid Red ;
border-bottom : 50px Solid transparent ;
}
The triangle to the left
Source code:
# Triangle- left {
width : 0 ;
height : 0 ;
border-top : 50px Solid transparent ;
border-right : 100px Solid Red ;
border-bottom : 50px Solid transparent ;
}
The star (5 end)
Source code:
# Star-five {
margin : 50px 0 ;
position : relative ;
display : block ;
Color : Red ;
width : 0px ;
height : 0px ;
border-right : 100px Solid transparent ;
border-bottom : 70px Solid Red ;
border-left : 100px Solid transparent ;
-Moz-transform: rotate ( 35 deg);
-Webkit-transform: rotate ( 35 deg);
-Ms-transform: rotate ( 35 deg);
-O-transform: rotate ( 35 deg);
}
# Star-five: before {
border-bottom : 80px Solid Red ;
border-left : 30px Solid transparent ;
border-right : 30px Solid transparent ;
position : absolute ;
height : 0 ;
width : 0 ;
top : 45px- ;
left : 65px- ;
display : block ;
content : '' ;
-Moz-transform: rotate ( -35 deg);
-Webkit-transform: rotate ( -35 deg);
}
# Star-five: after {
position : absolute ;
display : block ;
Color : Red ;
top : 3px ;
left : 105px- ;
width : 0px ;
height : 0px ;
border-right : 100px Solid transparent ;
border-bottom : 70px Solid Red ;
border-left : 100px Solid transparent ;
-Moz-transform: rotate ( -70 deg);
-Webkit-transform: rotate ( -70 deg);
content : '' ;
}
Pentagon
Source code:
# Pentagon {
position : relative ;
width : 54px ;
border-width : 50px 18px 0 ;
border-style : Solid ;
border-Color : Red transparent ;
}
# Pentagon: before {
content : "" ;
position : absolute ;
height : 0 ;
width : 0 ;
top : 85px- ;
left : 18px- ;
border-width : 0 45px 35px ;
border-style : Solid ;
border-Color : transparent transparent Red ;
}