HTML二级菜单都重叠在一起,html – 如何在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, 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;

}

• Home
• About
• Products
• Map
• Contact

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