Pure CSS star shape

 

This question already has an answer here:

  • How do CSS triangles work? 18 answers

    • Let's break it into pieces:

    The yellow borders are actually set as transparent in the final product so they don't show. They are yellow here to show how the borders look.

    As commented above, this answer shows the idea behind the basic triangle shape.

    The div by itself: 

    <div id="star-five"></div>

    Combining the :before pseudo element is the same as this: 

    <div id="star-five">
    <div id="before"></div>
</div>

    Finally, combining the :after pseudo element is the same as this: 

    <div id="star-five">
    <div id="before"></div>

    <div id="after"></div>
</div>

    Now you overlap each element precisely using position: absolute; and rotate with transform as needed to get the final product:

    完成品

    Let's visualise it!

    动画

    You can draw a triangle using large borders, which is what is happening there. Then they're just rotating and positioning the triangles in a star pattern.

    链接地址: http://www.djcxy.com/p/89474.html

    上一篇: 与背景图像的CSS三角形

    下一篇: 纯CSS星形