How to create a simple pentagram graphic using pure CSS3

We can use SVG, Canvas, CSS3 or background images to achieve the pentagram pattern and its hover effect.

The pseudo-element and transformation characteristics introduced by CSS3 make it very simple to implement the pentagram graph, and can be combined with a gradient to achieve a more beautiful effect.
So using a picture to achieve a pentagram is no longer necessary (images occupy extra requests, and the amount of data is large.) Unless you want to support a low-version desktop IE browser).

First we create a triangle, which is usually implemented using elements with a large size edge and 0 content size, and the code demonstrates:

. tri {    width:0;    height:0;    border-left:15px solid transparent;    border-right:15px solid transparent;    border-bottom:30px solid Red;}

In the second step, we use pseudo-elements: after and: Before to clone 2 triangles of the same size.

. tri:after,.tri:before {    width:0;    height:0;    border-left:15px solid transparent;    border-right:15px solid transparent;    border-bottom:30px solid Red;}

Then, we apply different rotation transformations on the above 2 pseudo-elements:

. tri:before {    transform:rotate (70deg);}. Tri:after {    transform:rotate ( -70deg);}

So we implemented a pentagram graphic (icon). We can achieve more geometric shapes in a similar way.

You can try it yourself through an online example: http://wow.techbrood.com/fiddle/10258

You can also think about how to implement a triangle with edges and gradients, and then refer to this implementation: http://wow.techbrood.com/fiddle/16978

by Iefreer

How to create a simple pentagram graphic using pure CSS3