我正在尝试为每个类别设置一个带有插入 透明三 Angular 形的菜单样式。 html 是这样的:
<li class="level0 nav-1 level-top first">
<a class="level-top" href="http://shop.de/kinderzimmer">
<span>
<span class="navborder navborder-left"></span>
Kinderzimmer
<span class="navborder navborder-right"></span>
</span>
</a>
</li>
...
...但如果需要,我可以添加/删除跨度/类等。
我的第一次尝试是这个 css:
#nav li.level0 a.level-top span {
position: relative;
width: 100%;
}
#nav li.level0 a.level-top span:after {
content: "";
left: 50%; /* center triangle */
margin-left: -20px; /* center triangle */
width: 0;
height: 0;
border-left: 20px solid red;
border-right: 20px solid red;
border-bottom: 20px solid transparent;
position: absolute;
top: 20px;
}
#nav li.level0 a.level-top span span.navborder-left:after {
border-bottom: 20px solid green;
}
#nav li.level0 a.level-top span span.navborder-right:after {
border-bottom: 20px solid blue;
}
(颜色仅供调试,完成后应与导航背景匹配。)
结果不符合预期:http://jsfiddle.net/9brsR/6/
span.navborder-left 和 span.navborder-right 的边框与居中的三 Angular 形元素有间隙。
任何人都知道如何修复 css 以具有类似这样的东西:http://puu.sh/7jMEe.png ?
最佳答案
这个有点复杂,但一些伪元素就可以解决。
CSS
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
ul, li {
padding: 0;
list-style: none;
}
ul {
text-align: center;
margin-top:15px;
}
li {
display: inline-block;
background-color: red;
font-size:0;
position: relative;
}
a {
display: block;
text-decoration: none;
font-size:1rem;
color:white;
padding: 1rem 2rem;
position: relative;
}
li:before,
li:after {
position: absolute;
content:"";
top:100%;
width:calc(50% - 12px); /* allows to width of triangle*/
height:12px;
background-color: red;
}
li:before{
left:0;
}
li:after {
right:0;
}
a:before {
position: absolute;
content:"";
z-index:-1; /* hide behind link */
border:12px solid red;
top:100%;
left:50%;
transform:translate(-50%, -50%); /* center the pseudo element and only show bottom half*/
}
a.current:before {
border-bottom-color:transparent; /* our triangle */
}
由于 calc
(IE9+) 和伪元素,浏览器支持有限。
关于css - 带有透明三 Angular 形的菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22198705/