How to draw pentagram by CSS
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!
