css - 带有不寻常圆角的菜单

Question

如何设计这个菜单？我不知道如何在悬停时设置这些圆角的样式。

感谢帮助。

Answer 1

您只需要颠倒您通常会做的事情：使活动链接与容器具有相同的背景颜色并且没有边框半径，并且不活动的边框半径和不同的背景颜色。

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

Answer 2

像这样的东西？

.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;
}