Creating shapes with CSS

05 Jun 2016

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 laughing.

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.