Create a Single Div Star with CSS in Five Steps

You may or may not know that you can create a single div star in CSS pretty easily. But if you haven’t examined the code in depth, you may be curious to know what’s going on under the hood. This article shows you how to build a single div star in five basic steps. Once you have these five steps down, you can make a huge array of other CSS single div shapes.

Step 1: Create three shapes from one div, using the :before and :after pseudo-elements:

The single div star starts with CSS’s :before and :after pseudo-elements. If you don’t already know, :before and :after are a handy way to add dynamic content to an element without additional markup. Take a look at the following code:

See the Pen ERGPNr by Float Nine (@floatnine) on CodePen.

Clicking between the HTML, CSS, and Result tabs, you can see that we were able to give each part of our div (:before, :after, and square) its own background color and dimensions. Also, the :before and :after pseudo-elements have been positioned absolutely, relative to the main element (see more about this effect in my article, Absolute Relative Positioning). The next step is to transform these shapes into the pieces of our single div star.

Step 2: Turn the pieces of the element into triangles

The key to creating triangles (or any angular shape) in CSS is using the border property. Take a look at the following shape’s multicolored border:

See the Pen Step 2a by Float Nine (@floatnine) on CodePen.

See how I’ve given each side of the border its own color? That way you can see that they meet each other at 45 degree angles at the bottom two corners of the square. If we then reduce the width and height of the square to zero, we have nothing but borders left, meeting together at the top center:

See the Pen Step 2b by Float Nine (@floatnine) on CodePen.

 

I’ve increased the size of each border to 150px so you can see the triangles that emerge more clearly. The final step to creating a triangle is to set the background color of all but one of the border sides to transparent:

See the Pen Step 2c by Float Nine (@floatnine) on CodePen.

Be sure to remove the background color of the element as well, or it will show through. So now we have a triangle. That’s great! The next step to creating our single div star is to combine steps 1 and 2.

 

Step 3: Create three triangles using steps 1 and 2

By using our pseudo-elements in conjunction with the border triangle trick, it’s not too hard to create three triangles from one div:

See the Pen Step 3 by Float Nine (@floatnine) on CodePen.

Notice we have one smaller acute triangle, and two larger obtuse triangles. This was achieved by altering the size of the left, bottom, and right borders for each triangle to create the specific shapes. The bottom border of the acute triangle is much taller than it’s two side borders, while the obtuse triangles’ bottom borders are slightly smaller than their adjacent borders.

You probably already see a single div star in the making. The next step is to rotate the shapes.

Step 4: Rotate the Shapes

Each section of an element (:before, main, and :after) can be altered independent of its siblings. So next we rotate each shape to its unique position, using the transform property:

See the Pen Step 4: Rotate the Shapes by Float Nine (@floatnine) on CodePen.

Nothing magical here. I’ve rotated the main element thirty-five degrees clockwise with the “transform: rotate(35deg)” style rule . This rotated the :before and :after pseudo-elements thirty-five degrees as well, so next I rotated the :before element back to its initial position with “transform: rotate(-35deg)”. Finally I rotated the after element thirty-five degrees counter-clockwise with “transform: rotate(-70deg)”, which corrected for the thirty-five degrees it had been rotated clockwise, and then rotated it thirty-five degrees more counter-clockwise. Our shapes are now ready to be merged.

Step 5: Merge the shapes to create a single div star

The final step is to move the shapes together. Utilizing the absolute relative positioning technique we employed earlier, we just need to position the :before and :after pseudo-elements to rest on top of the main element:

See the Pen Step 5: Merge the Shapes by Float Nine (@floatnine) on CodePen.

And voila! Our single div star is complete!

The coolest thing about what I’ve shown you here today is that you can use the combination of border generated polygons, rotation, and the :before and :after pseudo-elements to create a huge array of different shapes, from cut diamonds, to eight and twelve point starbursts, to chevrons, and so on. Using other CSS properties like box-shadows, skews, and border-radiuses allow you to make a ton more amazing shapes. Check out this CSS Tricks article to learn more.

2 thoughts on “Create a Single Div Star with CSS in Five Steps”

Leave a Reply

Your email address will not be published. Required fields are marked *