放置5個圖像在一個圓圈與css

Question

我有一個應該保存5個圖像（圓形）的div，這些形狀應該旋轉（但這不是問題，我可以用jQuery來做到這一點）。問題是如何通過css定位圖像，以便它們與其他圖像具有相等的距離，並且每個距離div的中心距離相同。我不知道這是有道理的，但我會盡量說明我的意思用星號標記：

 * 
    *  * 
    * * 

主塊{

position: absolute; 
left: 0; 
right: 0; 
top: 0; 
bottom: 0; 
margin: auto; 
height: 500px; 
width: 500px; 
border-radius: 250px; 
background-color: rgba(255,255,255,0.5); 

}

Answer 1

後哈利的有益的聯繫我相信這是解決方案，即使我應該清除多餘的代碼（試圖移動背景重複：不重複和背景大小：初始;對於div> div選擇器，但這並不能很好地工作......

index.html頁面：

<div id="main-block"> 
    <div></div> 
    <div></div> 
    <div></div> 
    <div></div> 
</div> 

的style.css：

#main-block { 

    position: fixed; 
    left: 0; 
    right: 0; 
    top: 0; 
    bottom: 0; 
    margin: auto; 
    height: 500px; 
    width: 500px; 
    border-radius: 50%; 
} 

div > div { 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 50%; 
    width: 50%; 
    transform-origin: bottom right; 
    border-radius: 50%; 
    } 

div > div:after { 
    position: absolute; 
    content: ''; 
    bottom: 0; 
    left: 0; 
    height: 25px; 
    width: 25px; 
    background: transparent; 
    border-radius: 50%; 
    transform: translateY(50%); 
} 

div > div:nth-child(1) { 
    transform: rotate(0deg); 
    background: url(img/white-mana.png) center center; 
    background-repeat: no-repeat; 
    background-size: initial ; 

} 

div > div:nth-child(2) { 
    transform: rotate(72deg); 
    background: url(img/blue-mana.png) center center; 
    background-repeat: no-repeat; 
    background-size: initial ; 
} 

div > div:nth-child(3) { 
    transform: rotate(144deg); 
    background: url(img/black-mana.png) center center; 
    background-repeat: no-repeat; 
    background-size: initial ; 
} 

div > div:nth-child(4) { 
    transform: rotate(216deg); 
    background: url(img/red-mana.png) center center; 
    background-repeat: no-repeat; 
    background-size: initial ; 
} 

div > div:nth-child(5) { 
    transform: rotate(288deg); 
    background: url(img/green-mana.png) center center; 
    background-repeat: no-repeat; 
    background-size: initial ; 
}