在html中制作圆形导航器

Question

是否可以制作圆形导航器？ 例如一个圈子分成4个，每个师有不同的链接呢？

以及如果有可能我可以把动画放在它们上或当鼠标悬停时改变颜色？ TNX ...

Answer 1

使用border-radius

HTML

<div id="circle-container"> 
<div class="quarter top-left"><a href="#">link 1</a></div> 
<div class="quarter top-right"><a href="#">link 2</a></div> 
<div class="quarter bottom-left"><a href="#">link 3</a></div> 
<div class="quarter bottom-right"><a href="#">link 4</a></div> 
</div> 

CSS

#circle-container{width:100px;height:100px} 
.quarter{width:50px;height:50px} 
.top-left{border-top-left-radius:50px;background:#e3f9d1;float:left} 
.top-right{border-top-right-radius:50px;background:#c0f7f7;float:right} 
.bottom-left{border-bottom-left-radius:50px;background:#fc92f5;float:left} 
.bottom-right{border-bottom-right-radius:50px;background:#333;float:right} 
a{ 
text-decoration:none; 
    color:red; 
    width:50px; 
    line-height:50px; 
    display:block; 
    text-align:center 
} 

DEMO