Shapes made with basic CSS

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.

div {
    display: inline-block;
}
#square {
    width: 100px;
    height: 100px;
    background: #001f3f;
}
#rectangle {
    width: 140px;
    height: 100px;
    background: #0074D9;
}
#trapezium {
    height: 0;
    width: 100px;
    border-bottom: 100px solid #7FDBFF;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
#triangle {
    width: 0;
    height: 0;
    border-bottom: 100px solid #39CCCC;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
#triangle_down {
    width: 0;
    height: 0;
    border-top: 100px solid #3D9970;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}
#triangle_left {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-right: 100px solid #2ECC40;
    border-bottom: 50px solid transparent;
}
#triangle_right {
    width: 0;
    height: 0;
    border-top: 50px solid transparent;
    border-left: 100px solid #01FF70;
    border-bottom: 50px solid transparent;
}
#diamond { 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-bottom-color: #FFDC00; 
    position: relative; 
    top: -50px; 
} 
#diamond:after { 
    content: ''; 
    position: absolute;
    left: -50px; 
    top: 50px; 
    width: 0; 
    height: 0; 
    border: 50px solid transparent; 
    border-top-color: #FFDC00; 
}
#circle {
    width: 100px;
    height: 100px;
    background: #FF851B;
    -moz-border-radius: 50px;
    -webkit-border-radius: 50px;
    border-radius: 50px;
}
#oval {
    width: 150px;
    height: 100px;
    background: #FF4136;
    -webkit-border-radius: 75px / 50px;
    -moz-border-radius: 75px / 50px;
    border-radius: 75px / 50px;
}
#pentagon {
  	margin-top: 45px;
    width: 60px;
    position: relative;
    border-width: 50px 20px 0;
    border-style: solid;
    border-color: #85144b transparent;
}
#pentagon:before {
    content: "";
    height: 0;
    width: 0;
    position: absolute;
    top: -92px;
    left: -20px;
    border-width: 0 50px 42px;
    border-style: solid;
    border-color: transparent transparent #85144b;
}
#star {
  	width: 0;
    height: 0;
    position: relative;
    margin: 30px 0;
    border: 50px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 30px solid pink;
    -webkit-transform: rotateZ(35deg);
    transform: rotateZ(35deg);
}
#star::before {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: -21px;
    left: -29px;
    border: 14px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 30px solid pink;
    -webkit-transform: rotateZ(-35deg);
    transform: rotateZ(-35deg);
}
#star::after {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: 0px;
    left: -50px;
    border: 50px solid rgba(0,0,0,0);
    border-top: 0 solid;
    border-bottom: 30px solid pink;
    -webkit-transform: rotateZ(-70deg);
    transform: rotateZ(-70deg);
}
#bubble {
    width: 120px;
    height: 100px;
    position: relative;
    -webkit-border-radius: 20px;
    border-radius: 20px;
    background: #B10DC9;
}
#bubble::before {
    width: 0;
    height: 0;
    position: absolute;
    content: "";
    top: 26px;
    left: 100%;
  	border-bottom: 20px solid transparent;
    border-left: 26px solid #B10DC9;
    border-top: 20px solid transparent;
}
#pacman {
  	margin-left: 30px;
    width: 0;
    height: 0;
    border-right: 50px solid #FDCE02;
    border-top: 50px solid #FDCE02;
    border-left: 50px solid transparent;
    border-bottom: 50px solid #FDCE02;
    border-top-left-radius: 50px;
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
    border-bottom-right-radius: 50px;
}
#close-button {
    width: 100px;
    height: 100px;
    position: relative;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    background: #CCBE97;
}
#close-button::before {
    display: inline-block;
    width: 70px;
    height: 10px;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    background: #49494B;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
    margin-left: -35px;
    margin-top: -5px;
}
#close-button::after {
    display: inline-block;
    width: 70px;
    height: 10px;
    position: absolute;
    content: "";
    top: 50%;
    left: 50%;
    background: #49494B;
    -webkit-transform: rotateZ(-45deg);
    transform: rotateZ(-45deg);
    margin-left: -35px;
    margin-top: -5px;
}
#magnifying-glass {
    width: 60px;
    height: 60px;
    position: relative;
    border: 6px solid #EEE5E6;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 0 40px 40px 0;
}

#magnifying-glass::before {
    display: inline-block;
    width: 50px;
    height: 8px;
    position: absolute;
    content: "";
    right: -35px;
    bottom: -15px;
    background: #EEE5E6;
    text-shadow: none;
    -webkit-transform: rotateZ(45deg);
    transform: rotateZ(45deg);
}
#ribbon {
    width: 0;
    height: 80px;
    border: 50px solid #C93C06;
    border-top: 0 solid;
    border-bottom: 35px solid rgba(0,0,0,0);
}

Insight into CSS shapes

We use cookies