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

    CSS Howto..

    How to truly align center of two elemnts with css?

    How to make a button that can change background color of a doucment?

    How to fix internet explorer 9 overflow with form elements displayed in a list and “display:table”-based layout

    How to create a fluidic list using css

    How can i get target with a hover an element under an element?

    How to understand CSS Background-Position coordinates

    How to incorporate CSS into a table

    How should I modify this code so it works with severel id's?

    CSS: How to set up gradient background cross browser (only missing IE8 and IE9)

    How to make a webpage display dynamic data in real time using Python?

    How to indicate there is more text to scroll?

    How to bundle Angular 2 component css?

    How to get rid of spaces with CSS

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to preload predefined images in Java-Script / jQuery?

    CSS How to use margins with different divs

    How can I create Input field over full screen, image slideshow

    How to reference JSF image resource as CSS background image url

    How to use two JavaScript (.js) files on one website?

    How to exclude leading hyphens from justification in dialogue lines using CSS + HTML?

    How to display “a” to full of the line

    How to put div under content when resize window?

    How to apply css, after Jquery adds a class?

    How to position footer correctly with css?

    How to change or call svg clippath polygon attributes in CSS

    How to run CSS text animation in a sequence. (one line of text after another)

    How to align image to top left of div

    CSS: How to display image icon before each h3 in CSS?

    How to stack an overlay over html5 video

    How to change the current link color in navigation bar