如何创建弯曲 &CSS 中的重叠菜单选项卡 [英] How to create Curved & Overlapping Menu Tabs in CSS

问题描述

我想做一个菜单，其中菜单的末端重叠，它们有弯曲的边框和略微倾斜的边缘.

不使用背景图片，是否可以只用CSS做这样的菜单?

为了更好的理解，附上了下面的菜单示例.想知道如何单独使用CSS制作红色标记的部分.

请帮忙，提前致谢.

解决方案

• 倾斜 :before 和 :after 伪元素，
• 将伪代码设置为一些 - 偏移
• 将左上的 border-radius 添加到 :before 和右上的 :after
• 如果需要(移除顶部硬边)将顶部边框半径添加到 A 元素
• 将 z-index:1; 添加到 :after
• 将 z-index:1; 添加到 .active 的 :before 元素.

nav li {显示:内联块；边框底部:1px 实心 #8BBF50；左边距:-20px；}导航{文字装饰:无；颜色:#fff;背景:#8BBF50；位置:相对；显示:内联块；边距:0 22px；填充:8px 11px；文本阴影:0 1px 0 rgba(0, 2, 0, 0.4);边框半径:7px 7px 0 0;/* 只是为了平滑顶部边缘 */}导航:之前，导航 a:after {内容: " ";位置:绝对；顶部:0；宽度:23px；高度:100%；背景色:继承；}导航 a:before {边界半径:12px 0 0 0；变换:倾斜(-24度)；左:-13px；/* 玩这个给 LI 边框 ~2px 挤出 */}导航 a:after {边界半径:0 12px 0 0；变换:倾斜(24度)；右:-13px；/* 玩这个给 LI 边框 ~2px 挤出 */右边框:1px 实心 #628E2F；z-索引:1；/* 重叠下一个元素 */}/* 李活跃 */导航 li.active {边框底部:1px 实心 #fff;}导航 li.active a {颜色:#8BBF50；背景:#fff;}导航 li.active a:before {z-索引:1；/* 重叠上一个元素 */}导航 li.active a:after {边框底部:1px 实心 #fff;}

<ul><li><a>首页</a></li><li class="active"><a>关于</a></li><li><a>产品</a></li><li><a>地图</a></li><li><a>联系人</a></li></nav>

上面没有提供tab底部的凹曲率，而是使用了LI元素border-bottom 2px的挤压，给眼睛带来轻微的感觉.不完美，但仍然是一个不错的解决方案.

jsBin 现场演示

I want to make a menu, in which the ends of the menus overlap and they have curved borders and slightly slanting edges.

Without using a background image, is it possible to do such a menu with only CSS?

For better understanding, have attached the sample of menu below. Want to know how to make the parts marked in red using CSS alone.

Please help, thanks in advance.

解决方案

• Skew the :before and :after pseudo elements,
• set pseudos to some - offset
• add left-top border-radius to :before and right-top to :after
• if needed (to remove the top hard edge) add top border radius to the A element
• add z-index:1; to the :after
• add z-index:1; to the .active's :before element.

nav li {
  display: inline-block;
  border-bottom: 1px solid #8BBF50;
  margin-left: -20px;
}

nav a {
  text-decoration: none;
  color: #fff;
  background: #8BBF50;
  position: relative;
  display: inline-block;
  margin: 0 22px;
  padding: 8px 11px;
  text-shadow: 0 1px 0 rgba(0, 2, 0, 0.4);
  border-radius: 7px 7px 0 0; /* just to smooth the top edges */
}

nav a:before,
nav a:after {
  content: " ";
  position: absolute;
  top: 0;
  width: 23px;
  height: 100%;
  background-color: inherit;
}

nav a:before {
  border-radius: 12px 0 0 0;
  transform: skew(-24deg);
  left: -13px; /* play with this one to give the LI border ~2px extrusion */
}

nav a:after {
  border-radius: 0 12px 0 0;
  transform: skew(24deg);
  right: -13px; /* play with this one to give the LI border ~2px extrusion */
  border-right: 1px solid #628E2F;
  z-index: 1; /* overlap next element */
}


/* LI ACTIVE  */

nav li.active {
  border-bottom: 1px solid #fff;
}

nav li.active a {
  color: #8BBF50;
  background: #fff;
}

nav li.active a:before {
  z-index: 1; /* overlap prev element */
}

nav li.active a:after {
  border-bottom: 1px solid #fff;
}

<nav>
  <ul>
    <li><a>Home</a></li>
    <li class="active"><a>About</a></li>
    <li><a>Products</a></li>
    <li><a>Map</a></li>
    <li><a>Contact</a></li>
  </ul>
</nav>

The above does not provide the concave curvature at the bottom of the tab, instead I used the LI element border-bottom 2px extrusion to give a slight feeling to the eye. Not perfect but still a nice solution.

live demo on jsBin

这篇关于如何创建弯曲 &CSS 中的重叠菜单选项卡的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！