Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to draw five-pointed stars in CSS". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "CSS how to draw five-pointed stars".

Idea: in fact, the idea to achieve a five-pointed star is to draw three triangles first, and then combine the three triangles to get a five-pointed star.

Specific code:

CSS draw pentagram-(yisu.com) # star-five {margin: 100px 0; position: relative; display: block; color: red; width: 0px; / * set the width and height of the element to 0cm / height: 0px; border-right: 100px solid transparent; / * set the right part to transparent * / border-bottom: 70px solid # ff0000; / * set the bottom to red * / border-left: 100px solid transparent / * set the left part to transparent * / / * rotate 35 degrees clockwise * /-moz-transform: rotate (35deg); / * Firefox*/-webkit-transform: rotate (35deg); / * Safari and Chrome*/-ms-transform: rotate (35deg); / * IE 9 degrees /-o-transform: rotate (35deg) / * Opera*/} # star-five:before {border-bottom: 80px solid # ff0000; border-left: 30px solid transparent; border-right: 30px solid transparent; position: absolute; height: 0; width: 0; top:-45px; left:-65px; display: block; content:'';-webkit-transform: rotate (- 35deg);-moz-transform: rotate (- 35deg);-ms-transform: rotate (- 35deg) -o-transform: rotate (- 35deg);} # star-five:after {position: absolute; display: block; color: red; top: 3px; left:-105px; width: 0px; height: 0px; border-right: 100px solid transparent; border-bottom: 70px solid # ff0000; border-left: 100px solid transparent;-webkit-transform: rotate (- 70deg);-moz-transform: rotate (- 70deg);-ms-transform: rotate (- 70deg) -o-transform: rotate (- 70deg); content:';} at this point, I believe you have a better understanding of "how CSS draws five-pointed stars". You might as well do it in practice! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.