Vojta Vojta - 1 year ago 86
HTML Question

Pentagram using css

can anyone tell me how to draw pentagram such as this using CSS?
10 straight lines I need to treat each of them separately (different color, thickness etc.)
Thank you in advance
enter image description here

Answer Source

#pentagram {margin: 250px auto;}
#pentagram div {
  position:absolute;height:5px;border-radius:2px;
}

#star_1{transform:rotate(180deg) translateY(77px);background:#bb0000;width:476px;}
#star_2{transform:rotate(-36deg) translateY(77px);background:#bb0000;width:476px;}
#star_3{transform:rotate(36deg) translateY(77px);background:#bb0000;width:476px;}
#star_4{transform:rotate(108deg) translateY(77px);background:#bb0000;width:476px;}
#star_5{transform:rotate(-108deg) translateY(77px);background:#bb0000;width:476px;}

#out_1{transform:rotate(180deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;}
#out_2{transform:rotate(-36deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;}
#out_3{transform:rotate(36deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;}
#out_4{transform:rotate(108deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;}
#out_5{transform:rotate(-108deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;}
<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 id="out_1"></div>
  <div id="out_2"></div>
  <div id="out_3"></div>
  <div id="out_4"></div>
  <div id="out_5"></div>
</div>

i thik it's better use translate than "top and left" to place your lines

Edit:

#pentagram div {
  height:5px;border-radius:2px;
}

represents the common css flags for all branches, if you want custom widthfor the branches, just cut and paste it into the corresponding IDs

#out_3{transform:rotate(36deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;height:10px;border-radius:5px;}
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download