How to Make a Pentagram with CSS Border Attributes - border

Question

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

Answer 1

solution to what has been asked here
Fiddle
<div id="pentagram"></div>
#pentagram {
position: absolute;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
border-bottom: 80px solid black;
top:100px;
left:50px;
}
#pentagram:before {
content: "";
position: absolute;
width: 0;
height: 0;
border-right: 120px solid transparent;
border-left: 120px solid transparent;
border-top: 80px solid black;
-webkit-transform: rotate(34deg);
margin:6px 0 0 -122px;
}
#pentagram:after {
content: "";
position: absolute;
width: 0;
height: 0;
border-top: 120px solid transparent;
border-bottom: 120px solid transparent;
border-right: 80px solid black;
-webkit-transform: rotate(15deg);
margin:-74px 0 0 -42px;
}

Answer 2

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);}