Tuesday , 23 December 2014
Popular Posts
Home » CSS » Creating shapes triangle circle ribbon bubble with css

Creating shapes triangle circle ribbon bubble with css

    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

	#left{
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-left: 30px solid #ACFAA0;
		width: 0px;
		height: 0px;
	}

Right Triangle

	#right{
		border-top: 30px solid transparent;
		border-bottom: 30px solid transparent;
		border-right: 30px solid #FF5559;
		width: 0px;
		height: 0px;
	}

triangle-right-css

Top Triangle

	#top{
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		border-bottom: 30px solid #DD9A68;
		width: 0px;
		height: 0px;
	}

top-triangle-css

Bottom Triangle

	#bottom{
		border-right: 30px solid transparent;
		border-left: 30px solid transparent;
		border-top: 30px solid #9E97F4;
		width: 0px;
		height: 0px;
	}

Quarter Shape with CSS

	#quarter{
		background: #C6F16B;
		border-radius: 0 100px 0 0;
		width: 100px;
		height: 100px;
	}

quarter-shape-css

Circle Shape with CSS

	#circle{
		background: #A47448;
		border-radius: 90%;
		width: 100px;
		height: 100px;
	}

circle-shape-css

Half Circle Shape with CSS

	#half-circle{
		background: #A47448;
		border-radius: 90px 90px 0px 0px;
		width: 90px;
		height: 45px;
	}

half-circle-shape-css

Pokemon Shape with CSS

	#pokemon{
		border-radius: 50%;
		border: 30px solid #EA301C;
		border-right: 30px solid transparent;
	}

pokemon-shape-css

Ribbon Effect with CSS

	#ribbon{
		border: 30px solid #594DFB;
		height: 200px;
		border-bottom: 30px solid transparent;
	}

ribbon-effect-css

Heart Shape Effect with CSS

This feature is only supported in Firefox, It will not work in other browsers like Chrome, Safari and Opera

	#heart1{
		border-color: red;
		border-style: dotted;
		border-width: 0 50px 50px 0;
		height:0;
		margin-left: 40px;
		margin-top: 40px;
		width:0;
	}
	#heart2{
		border-color: red;
		border-style: dotted;
		border-width: 0 50px 50px 0;
		height:0;
		margin-left: 40px;
		margin-top: 40px;
		width:0;
		-moz-transform:rotate(44deg); /* Firefox */
		box-shadow: 0px 0px 5px 2px #888;
	}




View Demo


About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

One comment

Leave a Reply

Your email address will not be published. Required fields are marked *

*


*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Notify me of followup comments via e-mail. You can also subscribe without commenting.