border - 如何使用 CSS 边框属性制作五 Angular 星

Question

我正在为死亡金属制作一个网站，想知道是否可以使用边框属性在 CSS3 中制作一个五 Angular 星。我能够找到一些引用资料，使我相信有可能制作出 6 分星，但经过几个小时的精神折磨后，我放弃了制作 5 分星。这可能吗？

六 Angular 星由两个三 Angular 形组成，这就是 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;
}