Question

我正在制作死亡金属宣传片的网站，并想知道是否有可能使用边框属性在CSS3中制作五角星。我能够找到一些参考资料让我相信它有可能成为一个六分星，但经过几个小时的精神折磨，我已经放弃了制造一个5分的明星。这可能吗？

一个六角星形由两个三角形组成，这就是css3如何通过以下代码将其拉出来：

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

但它得到了5分的混乱，因为它不能被分解成更小的多边形。任何关于如何实现这一点的知识都会很棒。

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

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

Answer 1

解决了这里提出的问题

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

通过谷歌搜索，我找到了this site。通过摆弄一点点（我按F12），我发现了这个：

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边框属性制作五角星

2 个答案: