html - 五 Angular 星使用CSS

谁能告诉我如何使用CSS绘制这样的五角星形？
我需要分别处理10条直线（不同的颜色，厚度等）
先感谢您

最佳答案

#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>

我认为最好使用翻译而不是“顶部和左侧”来放置行

编辑：

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

代表所有分支的通用css标志，如果要为分支定义自定义宽度，只需将其剪切并粘贴到相应的ID中

#out_3{transform:rotate(36deg) translateY(-202px);background:#00bb00;width:296px;margin-left:90px;height:10px;border-radius:5px;}