html - 在html中制作圆形导航器

Question

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

如果可能的话，我可以在鼠标悬停时在它们上面放置动画或颜色变化吗？天...

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
}

演示