This tut will be focusing on creating different shaped made with css only and no images. This sounds funny but we can create many shapes by just using css. You can see this feature on facebook.com, google.com, tooltoop plugins and many other websites, its mostly used in bubble and tooltip. Its always good to use css instead of images that helps fasten the page load speed. Shapes like triangle and ribbon shapes can prove to be a good alternatives for images. Lets take a look at different examples. If you have anything to add to this list please share.
Left Triangle
1
2
3
4
5
6
7
#left{
border-top:30pxsolid transparent;
border-bottom:30pxsolid transparent;
border-left:30pxsolid#ACFAA0;
width:0px;
height:0px;
}
Right Triangle
1
2
3
4
5
6
7
#right{
border-top:30pxsolid transparent;
border-bottom:30pxsolid transparent;
border-right:30pxsolid#FF5559;
width:0px;
height:0px;
}
Top Triangle
1
2
3
4
5
6
7
#top{
border-right:30pxsolid transparent;
border-left:30pxsolid transparent;
border-bottom:30pxsolid#DD9A68;
width:0px;
height:0px;
}
Bottom Triangle
1
2
3
4
5
6
7
#bottom{
border-right:30pxsolid transparent;
border-left:30pxsolid transparent;
border-top:30pxsolid#9E97F4;
width:0px;
height:0px;
}
Quarter Shape with CSS
1
2
3
4
5
6
#quarter{
background:#C6F16B;
border-radius:0100px00;
width:100px;
height:100px;
}
Circle Shape with CSS
1
2
3
4
5
6
#circle{
background:#A47448;
border-radius:90%;
width:100px;
height:100px;
}
Half Circle Shape with CSS
1
2
3
4
5
6
#half-circle{
background:#A47448;
border-radius:90px90px0px0px;
width:90px;
height:45px;
}
Pokemon Shape with CSS
1
2
3
4
5
#pokemon{
border-radius:50%;
border:30pxsolid#EA301C;
border-right:30pxsolid transparent;
}
Ribbon Effect with CSS
1
2
3
4
5
#ribbon{
border:30pxsolid#594DFB;
height:200px;
border-bottom:30pxsolid transparent;
}
Heart Shape Effect with CSS
This feature is only supported in Firefox, It will not work in other browsers like Chrome, Safari and Opera
[…] Contact « Creating shapes triangle circle ribbon bubble with css […]