Question

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

＆＃13;

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);
}

＆＃13;

  <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>

＆＃13;

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);
}

Answer 2

三角形的底部来自ul菜单border-bottom: red 3px solid;属性，而不是after元素。

您可以尝试通过在页面颜色附近添加背景颜色来掩饰外观，如下所示：

li.active a:after {
  background-color: rgb(28, 183, 152);
}

以下是它的外观：http://jsfiddle.net/AndrewL32/L786rqfs/3/

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

2 个答案: