Shapes made with basic CSS

Insight into CSS shapes

Below you will find some of the most simple, coolest, fun shapes that can be made with pure CSS3.
The shapes are: a square, a rectangle, a trapezium, triangles, a diamond, a circle, a oval, a pentagon, a star, a bubble, pacman, a close button, magnifying glass and a ribbon.
Why use them? well there are many advantages in using shapes instead of images but the most important one is that you will greatly reduce your page load and request time by eliminating unnecessary image requests.
But like with all great things there is a downside, unfortunately not all shapes are rendered correctly in all browsers.

Result Box
  • html
  • css

Share This:

Feel free to leave a comment!

You might alos be interested in: