How to Make a Pentagram with CSS Border Attributes

Tags: css,border,css3

Problem :

I'm making a website for death metal promos and was wondering if it was possible to make a pentagram in CSS3 using border attributes. I was able to find some references that lead me to believe it was possible to make a six-point star, but after several hours of mental torment I have given up on making a 5 point star. Is this possible?

A hexagram consists of two triangles and thats how css3 can pull it off with the following code:

#six-point-star {
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-bottom: 80px solid black;
}
#six-point-star:after {
   content:"";
   position: absolute;
   width: 0; 
   height: 0; 
   border-left: 50px solid transparent; 
   border-right: 50px solid transparent; 
   border-top: 80px solid black;
   margin: 30px 0 0 -50px;
}

But it gets confusing with 5 points because it can't be broken up into smaller polygons. Any knowledge as to how I could implement this would be great.

http://jsfiddle.net/8FjL2/1/

http://www.skinit.com/assets/seo/jumbo_shot/jumbo_shot50039084/pentagram.jpg

---

Solution :

Well by doing a little bit of Googling, I found this site. By fiddling around a little bit (I pressed F12), I found this:

HTML:

<div id="pentagram">
<div id="star_1"></div>
<div id="star_2"></div>
<div id="star_3"></div>
<div id="star_4"></div>
<div id="star_5"></div>
</div>

CSS:

#pentagram{margin:0 auto;margin-top:45px;margin-bottom:75px;height:500px;width:500px;border-radius:500px;border:5px solid #bb0000;position:relative;}#pentagram div{position:absolute;background:#bb0000;width:476px;height:5px;}
#star_1{top:328px;left:12px;}
#star_2{top:183px;left:-38px;transform:rotate(-37deg);-ms-transform:rotate(-37deg);-webkit-transform:rotate(-37deg);}
#star_3{top:183px;right:-38px;transform:rotate(37deg);-ms-transform:rotate(37deg);-webkit-transform:rotate(37deg);}
#star_4{top:268px;right:-60px;width:480px !important;transform:rotate(107deg);-ms-transform:rotate(107deg);-webkit-transform:rotate(107deg);}
#star_5{top:268px;left:-60px;width:480px !important;transform:rotate(-107deg);-ms-transform:rotate(-107deg);-webkit-transform:rotate(-107deg);}