我想制作一个菜单,其中菜单的两端重叠,它们有弯曲的边框和略微倾斜的边缘.
如果不使用背景图像,是否可以仅使用CSS进行此类菜单？
为了更好地理解,请附上下面的菜单示例.想知道如何仅使用CSS将部件标记为红色.
请提前帮助,谢谢.
解决方法
>歪斜：之前和之后：伪元素,
>将pseudos设置为某些 – 偏移量
>将left-top border-radius添加到：before和right-top to：after
>如果需要(删除顶部硬边),请将顶部边框半径添加到A元素
>添加z-index：1;到：之后
>添加z-index：1;到.active的：在元素之前.
>将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>
