Question

我正在尝试为每个类别设置一个带有插入透明三角形的菜单。 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的边框与居中的三角形元素有间隙。

任何人都知道如何修复css以达到类似的效果：http://puu.sh/7jMEe.png？

Answer 1

这个有点复杂，但有一些伪元素会管理它。

Codepen Demo

<强> 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 +）和伪元素而受限制。

Answer 2

通过赋予此属性，您可以在鼠标悬停上实现三角效果。这是工作演示。 http://jsbin.com/tevoliva/2/

----------- CSS Code ---------------

ul{list-style-type:none; margin:0; padding:0;  background-color:#ef8913; }
ul li {display:inline-block; padding:15px; position:relative;}
ul li a{color:#ffffff; text-decoration:none;}
li.active:after,
li:hover::after { 
    content: ' '; 
    display: block; 
    position: absolute;
    left: 50%;
    bottom: 0px;
    margin-left:-10px;
    z-index: 99; 
    border-left: 12px solid transparent;
border-right: 12px solid transparent;
border-bottom: 12px solid white; 
}

----- HTML Code -------

<ul>
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li class="triangle"><a href="#">Item 5</a></li>
<li><a href="#">Item 6</a></li>
</ul>

带嵌入透明三角形的菜单

2 个答案: