css活跃LI的箭头与身体图像背景？

Question

我的目标是隐藏三角形下面的线,以便在我的活动菜单上显示_____ ^ _____.stackoverflow上也有类似的问题,但这些解决方案并没有解决我目前的问题.请帮我玩吧.谢谢! FIDDLE在这里.

body {
    background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg);
}
ul {
    width:100%;
    border-bottom:3px solid red
}
li {
    display:inline-block;padding:20px;
}
li a {
    display:block;position:relative;
}
li.active a:after {
    content:"";
    width:15px;
    height:15px;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    margin:12px auto 0;
    border:solid red;
    border-width:3px 3px 0 0;  
    -moz-transform:rotate(315deg);
    -webkit-transform:rotate(315deg);
    -ms-transform:rotate(315deg);
}

  <ul>
    <li><a href="#">LINK1</a></li>
    <li><a href="#">LINK2</a></li>
    <li class="active"><a href="#">LINK3</a></li>
    <li><a href="#">LINK4</a></li>
  </ul>

Answer 1

这个 CSS 代码将修复它：

更新的小提琴： http://jsfiddle.net/L786rqfs/6/

您需要将边框添加到 LI 中，并将其在前后内容的左侧和右侧进行切割。为了画龙点睛，我还在内容后面添加了 UL 边框，这样您就可以将其 100% 覆盖在页面上。

body {
    background: #1abc9c url(//dmypbau5frl9g.cloudfront.net/assets/homepage/banner--themeforest-342995208860d6c90b98134db089ef84.jpg);
}

ul {
    overflow: hidden; /* Clear float and hide ul:after content overflow */
    position: relative; /* Relative for ul:after content */
    width: 100%;
}

ul:after {
    content: "";
    border-bottom: 3px solid red;
    bottom: 0;
    position: absolute; /* Now it will start after the last LI */
    width: 100%;
}

li {    
    float: left;
    padding: 20px;
    position: relative;
}

li:before,
li:after {
    content: "";
    border-bottom: 3px solid red;    
    bottom: 0;
    position: absolute;
    width: 50%;
}

li:before {
    left: 0;
}

li:after {
    right: 0;
}

li.active:before,
li.active:after {
    width: calc(50% - 8px); /* Transparent part of the arrow */
}

li a {    
    display: block;
    position: relative;
}

li.active a:after {
    content: "";
    width: 15px;
    height: 15px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 12px auto 0;
    border: solid red;
    border-width: 3px 3px 0;  
    -moz-transform: rotate(315deg);
    -webkit-transform: rotate(315deg);
    -ms-transform: rotate(315deg);
}