html - 具有 body 图像背景的事件 LI 的 css 箭头？

Question

我的目标是隐藏三 Angular 形下方的线，以便在我的事件菜单上获得这个结果 _____^_____。 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 代码将修复它:

更新的 fiddle : 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);
}