<! DOCTYPEHtml>
<Html>
<Headlang="EN">
<Metacharset="UTF-8">
<Title>Pentagram</Title>
<Style>
#star-five {
Margin50px
PositionRelative
DisplayBlock
ColorRed
Width0;
Height0;
Border-right:100PX solid transparent;
Border-bottom:70PX solid red;
Border-left:100PX solid transparent;
/*-moz-transform:rotate (35DEG); */
/*-webkit-transform:rotate (35DEG); */
/*-ms-transform:rotate (35DEG); */
/*-o-transform:rotate (35DEG); */
TransformRotate35DEG);
}
#star-five:Before {
Border-bottom:80PX solid red;
Border-left:30PX solid transparent;
Border-right:30PX solid transparent;
PositionAbsolute
Height0;
Width0;
Top:-45px
Left:-65px
DisplayBlock
/* The following code is required to insert a non-empty box before the #star-five box */
Content‘‘;
-webkit-transform:Rotate (-35DEG);
-moz-transform:Rotate (-35DEG);
-ms-transform:Rotate (-35DEG);
-o-transform:Rotate (-35DEG);
}
#star-five:After {
PositionAbsolute
DisplayBlock
ColorRed
Top3px
Left:-105px
Width0;
Height0;
Border-right:100PX solid transparent;
Border-bottom:70PX solid red;
Border-left:100PX solid transparent;
-webkit-transform:Rotate (-70DEG);
-moz-transform:Rotate (-70DEG);
-ms-transform:Rotate (-70DEG);
-o-transform:Rotate (-70DEG);
Content‘‘;
}
</Style>
</Head>
<body>
<div id="star-five"></div>
</Body>
</html>
Draw a pentagram with CSS