Tutorial by Examples

To create a square, define an element with both a width and height. In the example below, we have an element with a width and height of 100 pixels each. <div class="square"></div> .square { width: 100px; height: 100px; background: rgb(246, 156, 85); } ...

To create a CSS triangle define an element with a width and height of 0 pixels. The triangle shape will be formed using border properties. For an element with 0 height and width the 4 borders (top, right, bottom, left) each form a triangle. Here's an element with 0 height/width and 4 different color...

A burst is similar to a star but with the points extending less distance from the body. Think of a burst shape as a square with additional, slightly rotated, squares layered on top. The additional squares are created using the ::before and ::after psuedo-elements. 8 Point Burst An 8 point burst a...

Circle To create a circle, define an element with an equal width and height (a square) and then set the border-radius property of this element to 50%. HTML <div class="circle"></div> CSS .circle { width: 50px; height: 50px; background: rgb(246, 156, 85); ...

A trapezoid can be made by a block element with zero height (height of 0px), a width greater than zero and a border, that is transparent except for one side: HTML: <div class="trapezoid"></div> CSS: .trapezoid { width: 50px; height: 0; border-left: 50px ...

This example shows how to create a cube using 2D transformation methods skewX() and skewY() on pseudo elements. HTML: <div class="cube"></div> CSS: .cube { background: #dc2e2e; width: 100px; height: 100px; position: relative; margin: 50px; } .cube::be...

This example shows how to create a pyramid using borders and 2D transformation methods skewY() and rotate() on pseudo elements. HTML: <div class="pyramid"></div> CSS: .pyramid { width: 100px; height: 200px; position: relative; margin: 50px; } .pyramid::b...