圍繞半個圓圈的位置元素（CSS）

嗯，我所要做的就是在半個圓的頂部部分獲得7個圓圈圖標。這裏的只有前3個圖標放置在順序演示：http://jsfiddle.net/yxVkk/15/圍繞半個圓圈的位置元素（CSS）

那怎麼圖標定位，現在完成：

.one { 
    left: -35px; 
    top: 30px; 
}

我發現這種方式非常複雜，這樣安排的所有圖標，我覺得有已得到做一個更好的方法。

這個方法我試過，但它只是沒有工作：http://dabblet.com/gist/3864650

有沒有做任何其他方式？

來源

2013-07-28 George

相關：http://stackoverflow.com/questions/26599782/positioning-divs-in-a-circle –

從您的鏈接的方法完美的作品。

jsFiddle

CSS

.circle-big { 
    position: relative; 
    height:180px; 
    width:180px; 
    padding: 21px; 
    border-radius: 50% 50%; 
    margin: 100px; 
    } 

.circle-big:before { 
    position: absolute; 
    height: 90px; 
    width: 180px; 
    border-radius: 90px 90px 0 0 ; 
    background: green; 
    content: ""; 
    } 

.circle { 
    border-radius: 50%; 
    width: 30px; 
    height: 30px; 
    background-color: red; 
    display: block; 
    position: absolute; 
    overflow: hidden; 
    top: 50%; 
    left: 50%; 
    margin: -15px; 
    } 

.one { transform: rotate(-30deg) translate(130px); } 
.two { transform: rotate(-50deg) translate(130px); } 
.three { transform: rotate(-70deg) translate(130px); } 
.four { transform: rotate(-90deg) translate(130px); } 
.five { transform: rotate(-110deg) translate(130px); } 
.six { transform: rotate(-130deg) translate(130px); } 
.seven { transform: rotate(-150deg) translate(130px); }

希望這是你所期望的。如果你想增加大圈和小圈之間的距離，只需增加翻譯。

來源

2013-07-28 12:03:36 tryzor

好吧，我認爲必須有一個錯誤或什麼，因爲這是我在演示頁面上看到的所有： http://i.imgur.com/t5JDvZj.png – George

我沒有包含供應商前綴。我添加了prefixfree。現在應該工作。 – tryzor

現在作品，謝謝！ – George

圍繞半個圓圈的位置元素（CSS）

回答

相關問題