0

我正在为死亡金属促销制作一个网站，并且想知道是否可以使用边框属性在 CSS3 中制作五角星。我能够找到一些参考资料，让我相信可以制作 6 分星，但经过几个小时的精神折磨，我放弃了制作 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

4

2 回答 2

3

解决这里所问的问题

小提琴

<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;
}
于 2013-01-15T05:38:54.547 回答
0

好吧，通过谷歌搜索，我找到了这个网站。通过摆弄一点（我按 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);}
于 2014-05-03T09:52:41.873 回答