css - 角が丸みを帯びた珍しいメニュー

Question

このメニューをどのようにスタイルしますか? ホバー時にこれらの丸い角をスタイルする方法がわかりません。

手伝ってくれてありがとう。

Answer 1

このようなものですか？

.menu-item {
    float: left;
    color: #fff;
    background: #444;
    padding: 1em;
    border-radius: 0 6px 6px 0;
    border-left: 7px solid #444; /* hide the rounded corners of the previous link */
    margin-left: -7px;
}

.menu-item:hover {
    background: transparent; /* show the gradient background of the container */
    border-left: 0;
    margin-left: 0;
}

.menu-item:first-child, .menu-item:hover + .menu-item {
    border-radius: 6px; /* the 1st link and the link next to hovered
                           have left rounded corners */
    border-left: 0;
    margin-left: 0;
}

Answer 2

通常とは逆にする必要があります。アクティブなリンクをコンテナと同じ背景色にして境界線の半径なしにし、非アクティブなリンクを境界線の半径と異なる背景色で作成します。

HTML

<ul>
  <li>Link 1</li>
  <li class='active'>Link 2</li>
</ul>

CSS

ul {background:grey;}
li {background:black; border-radius:5px;}
li.active {background:grey; border-radius:0;}

アクティブなリンクに画像のようなグラデーションが必要な場合は、含まれている div に背景としてグラデーションを与え、アクティブなリンクの背景を透明にします。

li.active {background:transparent;}