Creating shapes with CSS
With dwindling share of old IE browsers (IE <= 9), it is now safe to use CSS3 features & transforms to achieve the simple shapes or symbols we use in our website.
SAY NO TO IMAGES. I know images are the mandatory media in internet, but it is intended for use for big purpose/ rich graphical shows. It comes with a cost of slow downloads and rendering. So try to leverage CSS as much as possible to make a clean & fast webpages .
Here are few that I've showcased in this article (NOTE: I haven't provided any fallback - browser prefixes css. so kindly use css vendor prefix for supporting old browsers)
Circle:
Square:
Rectangle:
Up:
Down:
Hour glass:
Right:
Left:
Corner:
Corner:
Corner:
Corner:
Source for above CSS shapes
<!-- Circle -->
<div style="border-radius: 50%; width: 50px; height: 50px; background-color: green;"></div>
<!-- Square -->
<div style="width: 50px; height: 50px; background-color: green;"></div>
<!-- Rectangle -->
<div style="width: 100px; height: 50px; background-color: green;"></div>
<!-- Up -->
<div style="width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-bottom: 50px solid green;"></div>
<!-- Down -->
<div style="width: 0; height: 0; border-left: 25px solid transparent; border-right: 25px solid transparent; border-top: 50px solid green;"></div>
<!-- Hour glass -->
<div style="margin: 0 auto; width: 0; height: 0; border-left: 20px solid transparent; border-right: 20px solid transparent; border-top: 25px solid green; border-bottom: 25px solid green;"></div>
<!-- Right -->
<div style="width: 0; height: 0; border-left: 25px solid green; border-bottom: 25px solid transparent; border-top: 25px solid transparent;"></div>
<!-- Left -->
<div style="width: 0; height: 0; border-right: 25px solid green; border-bottom: 25px solid transparent; border-top: 25px solid transparent;"></div>
<!-- Corner -->
<div style="width: 0; height: 0; border-bottom: 50px solid green; border-left: 50px solid transparent;"></div>
<!-- Corner -->
<div style="width: 0; height: 0; border-top: 50px solid green; border-left: 50px solid transparent;"></div>
<!-- Corner -->
<div style="width: 0; height: 0; border-bottom: 50px solid green; border-right: 50px solid transparent;"></div>
<!-- Corner -->
<div style="width: 0; height: 0; border-top: 50px solid green; border-right: 50px solid transparent;"></div>
You can find out more about the shapes that you can create using CSS with a single HTML element in the linked css tricks article.
Let me know if you have better source that has more CSS3 based shapes. I will link the source url in this article.