html – 如何在CSS中创建曲线和重叠菜单选项卡

我想制作一个菜单,其中菜单的两端重叠,它们有弯曲的边框和略微倾斜的边缘.

如果不使用背景图像,是否可以仅使用CSS进行此类菜单？

为了更好地理解,请附上下面的菜单示例.想知道如何仅使用CSS将部件标记为红色.

请提前帮助,谢谢.

解决方法

>歪斜：之前和之后：伪元素,
>将pseudos设置为某些 – 偏移量
>将left-top border-radius添加到：before和right-top to：after
>如果需要(删除顶部硬边),请将顶部边框半径添加到A元素
>添加z-index：1;到：之后
>添加z-index：1;到.active的：在元素之前.

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

上面没有提供标签底部的凹曲率,而是使用LI元素边框底部2px挤压给眼睛带来轻微的感觉.不完美但仍然是一个很好的解决方案

live demo on jsBin

原文地址：https://www.jb51.cc/html/226610.html