如何製作徑向菜單？

-3

如何創建一個使用HTML & CSS 在上面的鏈接這按鈕面板？（白色形狀按鈕）

enter image description here

2015-03-31 WenukaGTX

我認爲創建'label'元素並隱藏按鈕本身可能會更好。這樣，您可以將多個元素構建到一個可單擊的區域，並通過[CSS轉換]（https://developer.mozilla.org/en-US/docs/Web/CSS/transform）使用更靈活的方法。長話短說，你所要求的是完全可能的，但涉及到一些思考和試驗。嚴格來說，這不是一個可以回答的問題。 – 2015-03-31 13:14:32

不要鏈接到已經消失的谷歌驅動器文件。 – 2016-08-10 08:07:09

我建議你這個網站，其中包含幾個樣式按鈕，只用border-radiusSweet CSS3 Buttons

使用按鈕嗎？但是你正在嘗試做的，如果你選擇到/ div （而不是canvas或SVG）你也需要使用css transform whit rotate和translateY/translateX。可能是這樣的：

// Clockwise 
.button2 { 
    transform: rotate(45deg) translateY(100px) translateX(-100px); 
} 
.button3 { 
    transform: rotate(90deg) translateY(100px) translateX(-100px); 
} 
.button4 { 
    transform: rotate(135deg) translateY(-100px) translateX(100px); 
} 
.button5 { 
    transform: rotate(45deg) translateY(100px) translateX(-100px); 
}

我希望這有助於。 Regards

來源

2015-03-31 13:24:26 Matho

你可以嘗試定位它們。但是，如果你知道你要使用多少鏈接，這纔會真正起作用。否則，如果您使用的是動態/未知號碼的鏈接

div{ 
 
    display:inline-block; 
 
    height:300px; 
 
    width:300px; 
 
    background:rgba(0,0,0,0.2); 
 
    border-radius:50%; 
 
    position:relative; 
 
    overflow:hidden; 
 
    border:10px solid black; 
 
    } 
 
div:before{ 
 
    content:""; 
 
    position:absolute; 
 
    height:70%; 
 
    width:70%; 
 
    border-radius:50%; 
 
    background:black; 
 
    top:15%; 
 
    left:15%; 
 
    z-index:8; 
 
    } 
 
div a { 
 
    position:absolute; 
 
    padding:20px; 
 
    background:tomato; 
 
    padding-bottom:50px; 
 
    } 
 
div a:nth-child(1){ 
 
    bottom:-10%; 
 
    left:50%; 
 
    transform:translateX(-50%); 
 
    } 
 
div a:nth-child(2){ 
 
    bottom:10%; 
 
    left:10%; 
 
    transform:translateX(-50%) rotate(55deg); 
 
    } 
 
div a:nth-child(3){ 
 
    bottom:10%; 
 
    left:90%; 
 
    transform:translateX(-50%) rotate(-55deg); 
 
    } 
 

 
div a:hover{ 
 
    background:cornflowerblue;

<div> 
 
    <a href="#">Lnk</a> 
 
    <a href="#">Lnk</a> 
 
    <a href="#">Lnk</a> 
 
</div>

注意一個JavaScript方法會更有益

你也可以嘗試使用的角度來看，雖然我認爲在這裏js會是一個更好的選擇

SCSS solution

來源

2015-03-31 14:07:01 jbutler483

如何製作徑向菜單？

回答

相關問題