如何使用CSS邊框屬性製作五角星形

我正在製作一個死亡金屬宣傳網站，並想知道是否可以在CSS3中使用邊框屬性製作五角星形。我找到了一些可以讓我相信有可能製造六分球的參考資料，但經過幾個小時的精神折磨之後，我放棄了製造一個五分球。這可能嗎？如何使用CSS邊框屬性製作五角星形

一卦由兩個三角形的和那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

來源

2013-01-15 Emanegux

你撥弄沒有正確設置。 – BoltClock

僅僅因爲可以用CSS3和元素的精細組合來做事情並不意味着你應該這樣做。使用SVG圖像。 – Ryan

如果您想要該JPG的背景效果 - 請使用該JPG。 :) – Ryan

問那麼做谷歌搜索一點點，我發現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);}

來源

2014-05-03 09:52:41 Inrolledeye

解決什麼一直在這裏

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

來源

2013-01-15 05:38:54 Uttara

如何使用CSS邊框屬性製作五角星形

回答

相關問題