CSS HTML Uncategorized

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

Right Triangle

triangle-right-css

Top Triangle

top-triangle-css

Bottom Triangle

Quarter Shape with CSS

quarter-shape-css

Circle Shape with CSS

circle-shape-css

Half Circle Shape with CSS

half-circle-shape-css

Pokemon Shape with CSS

pokemon-shape-css

Ribbon Effect with CSS

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




View Demo

 

Add Comment

Leave a Comment

*

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Shares

Let your friends know what are you reading

Share this post with your friends!