Create Shapes Using Pure CSS

CSS is not only good for styling the content on your web pages but is also great to create any kind of shapes. These examples will give you an idea of what kind of shapes CSS allows you to do. With some practice and imagination you can create more complex graphics than the ones in this tutorial.

Basic shapes with CSS

First of all, we are going to see some basic shapes that we can create with CSS.

Square

#square{
    width: 120px;
    height: 120px;
    background: blue;
}

Triangle

#triangle{
    width: 0;
    height: 0;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 120px solid blue;
}

Circle

#circle{
    width: 120px;
    height: 120px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: blue;
}

CSS Olympic rings shape

Now, I would like to show you something more challenging I’ve been working on especially for this tutorial. So let’s make something more complex such as the Olympic rings symbol.

HTML

<div id="area">
    <div id="blue_circle"></div>
    <div id="blue_p"></div>
    <div id="yellow_circle"></div>
    <div id="black_circle"></div>
    <div id="black_p"></div>
    <div id="green_circle"></div>
    <div id="red_circle"></div>
    <div id="red_p"></div>
</div>

CSS

First we are going to create the rings with the shadows.

#area {
    margin: 20px;
    position: relative;
    width: 326px;
    height: 90px;
}

#blue_circle, #yellow_circle, #black_circle, #green_circle, #red_circle {
    position: absolute;
    width: 100px;
    height: 100px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    background: transparent;
    box-shadow: 2px 2px 4px rgba(0,0,0,0.5), inset 2px 2px 4px rgba(0,0,0,.5);
    -webkit-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), inset 2px 2px 4px rgba(0,0,0,.5);  
    -moz-box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5), inset 2px 2px 4px rgba(0,0,0,.5);
}

#blue_circle {
    border: 8px solid blue;
    z-index: 1;
}

#yellow_circle {
    border: 8px solid yellow;
    z-index: 2;
    top: 45px;
    left: 55px;
}

#black_circle {
    border: 8px solid black;
    z-index: 1;
    left: 110px;
}

#green_circle {
    border: 8px solid green;
    z-index: 2;
    top: 45px;
    left: 165px;
}

#red_circle {
    border: 8px solid red;
    z-index: 1;
    left: 220px;
}

The following styling will simulate the rings interlocking to look more realistic.

#blue_p, #black_p, #red_p {
    position: absolute;
    width: 100px;
    height: 100px;
    -moz-border-radius: 100%;
    -webkit-border-radius: 100%;
    border-radius: 100%;
    z-index: 3;
}

#blue_p {
    border: 8px solid blue;
    border-bottom-color: transparent;
    border-top-color: transparent;
    border-left-color: transparent;
}

#black_p {
    border: 8px solid black;
    border-bottom-color: transparent;
    border-top-color: transparent;
    -webkit-transform: rotate(-52deg);
    -moz-transform: rotate(-52deg);
    -ms-transform: rotate(-52deg);
    -o-transform: rotate(-52deg);
    transform: rotate(-52deg);
    left:110px;
}

#red_p {
    border: 8px solid red;
    border-left-color: transparent;
    border-top-color: transparent;
    border-right-color: transparent;
    left:220px;
}

I hope that you have enjoyed this tutorial and this will give you some good ideas for shapes you can create. Please don’t hesitate to share your creates and share this article 🙂