css Pfeil des aktiven LI mit Körperbild Hintergrund?

Question

Mein Ziel ist es, die Linie unter dem Dreieck zu verstecken, um dieses Ergebnis _____^_____ auf meinem aktiven Menü zu haben. Es gibt ähnliche Fragen hier bei stackoverflow, aber diese Lösungen nicht behoben das Problem, das ich derzeit habe. Bitte helfen Sie mir damit zu spielen. Vielen Dank! FIDDLE hier.

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

Diese CSS-Code wird fix it:

Aktualisiert Geige: http://jsfiddle.net/L786rqfs/6/

Sie müssen das bringen grenzt an die LI und hackt sie im Vorher-Nachher-Inhalt links und rechts. Für den letzten Schliff bringe ich auch die Grenze nach UL nach Inhalt, damit du sie 100% über die Seite behältst.

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

Der untere Teil des Dreiecks ist von Ihrem ul Menü border-bottom: red 3px solid; Eigentum und nicht aus dem after Elemente.

Sie können versuchen, das Aussehen zu verschleiern, indem eine Hintergrundfarbe addieren nah an Ihrer Seite Farbe wie folgt aus:

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

Hier ist ein jsfiddle, wie es aussehen werden: http://jsfiddle.net/AndrewL32/L786rqfs/3/