html - 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
}

デモ