css3 はセクター ナビゲーション、1 つの円と 4 つのセクターを実装します_html/css_WEB-ITnose

レンダリング:

主な実装プロセス:

1) 4 つの Li 要素の位置を絶対に設定します。

2) li の回転中心を右下隅の変換原点に変更します。 100% 100%; 4 つの対応する回転角度は 0,90,180,270deg です

3) 5 番目の li を中心に配置します

4) 前の 4 li を角に向かって 10PX オフセットしてギャップを表示します

5) 設定します4 つのリーの a タグのグラデーションの背景色。円の中心の色が非表示の背景に設定されます: -webkit-radial-gradient(rightbottom、transparent 35%、#eee 35%);

ソースコード:

rree

<div class="nav">    <ul>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""><span class="icon"></span></a></li>        <li><a href=""></a></li>    </ul></div>