We can create various shapes using css without using any image

1. Circle:
Create dive with id circle ,now use css as
#circle {
width: 120px;
height: 120px;
background: #7fee1d;
-moz-border-radius: 60px;
-webkit-border-radius: 60px;
border-radius: 60px;
}

2. Square:
Create div with id square, now use css as
#square {
width: 120px;
height: 120px;
background: #f447ff;
}

3. Rectangle:
Create div with id rectangle, now use css as
#rectangle {
width: 220px;
height: 120px;
background: #4da1f7;
}

4. Oval:
Create div with id oval ,now use css as
#oval {
width: 200px;
height: 100px;
background: #e9337c;
-webkit-border-radius: 100px / 50px;
-moz-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

5. Triangle:
Create div with id triangle,now use css as
#triangle {
width: 0;
height: 0;
border-bottom: 140px solid #fcf921;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}

for traingle down use div with id triangle_down and css
#triangle_down {
width: 0;
height: 0;
border-top: 140px solid #20a3bf;
border-left: 70px solid transparent;
border-right: 70px solid transparent;
}

for triangle left use id triangle_left and css as
#triangle_left {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-right: 140px solid #6bbf20;
border-bottom: 70px solid transparent;
}

similarly with triangle right
#triangle_right {
width: 0;
height: 0;
border-top: 70px solid transparent;
border-left: 140px solid #ff5a00;
border-bottom: 70px solid transparent;
}

6. Diamond:
use the below css
#diamond {
width: 120px;
height: 120px;
background: #1eff00;
/* Rotate */
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
/* Rotate Origin */
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
margin: 60px 0 10px 310px;
}

for more intresting shapes,please refer: http://www.1stwebdesigner.com/create-different-shapes-css/

SHARE
Previous articleGradient Background
Next articleAndroid

LEAVE A REPLY