Dreieck Grenze

Question

Ich möchte eine Div-Grenze Nachrichten mit unteren transparenten Dreieck, aber links Dreiecksgrenze ist nicht gleich rechts, können Sie mir erklären warum oder lassen Sie mich wissen, andere Weise, es zu kodieren?

Mein Code:

.news { 
 

 
\t position: relative; 
 
\t margin: 75px auto; 
 
\t width: 200px; 
 
\t border: 1px #079199 solid; 
 
\t padding: 20px; 
 
\t 
 
\t color: #bcbcbc; 
 
\t 
 
\t word-wrap: break-word; 
 
\t 
 
} 
 

 
.news:after { 
 
\t 
 
\t position: absolute; 
 
\t content: ''; 
 

 
\t border: 25px solid transparent; 
 
\t border-top-color: #FFF; 
 
\t 
 
\t top: 100%; 
 
\t left: 50%; 
 
} 
 

 
.news:before { 
 
\t 
 
\t position: absolute; 
 
\t content: ''; 
 

 
    border-left: 26px solid transparent; 
 
    border-right: 26px solid transparent; 
 
    border-top: 26px solid; 
 
    border-top-color: #079199; 
 
\t 
 
\t top: 100%; 
 
\t left: 50%; 
 
}

<div class="news"> 
 
    TEST 
 
</div>

Answer 1

Da die Ausrichtung der beiden Pseudo-Elemente falsch war, versuchen, dies zu verwenden:

.news { 
 

 
\t position: relative; 
 
\t margin: 75px auto; 
 
\t width: 200px; 
 
\t border: 1px #079199 solid; 
 
\t padding: 20px; 
 
\t 
 
\t color: #bcbcbc; 
 
\t 
 
\t word-wrap: break-word; 
 
\t 
 
} 
 

 
.news:after, 
 
.news:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border: 25px solid transparent; 
 
    border-top-color: #ffffff; 
 
    
 
    top: 100%; 
 
    left: 50%; 
 
    
 
    transform: translateX(-50%); 
 
} 
 

 
.news:before { 
 
    border: 26px solid transparent; 
 
    border-top-color: #079199; 
 
}

<div class="news"> 
 
    TEST 
 
</div>

Answer 2

Sie positionieren sowohl 50% von links. Um die Grenze zu sehen, müssen Sie das farbige :before Dreieck etwas weniger nach links versetzen.

Wir können dies tun, indem eine negative margin-left

Anwendung

.news { 
 
    position: relative; 
 
    margin: 75px auto; 
 
    width: 200px; 
 
    border: 1px #079199 solid; 
 
    padding: 20px; 
 
    color: #bcbcbc; 
 
    word-wrap: break-word; 
 
} 
 

 
.news:after { 
 
    position: absolute; 
 
    content: ''; 
 
    border: 25px solid transparent; 
 
    border-top-color: #FFF; 
 
    top: 100%; 
 
    left: 50%; 
 
} 
 

 
.news:before { 
 
    position: absolute; 
 
    content: ''; 
 
    border-left: 26px solid transparent; 
 
    border-right: 26px solid transparent; 
 
    border-top: 26px solid; 
 
    border-top-color: #079199; 
 
    margin-left: -1px; 
 
    top: 100%; 
 
    left: 50%; 
 
}

<div class="news"> 
 
    TEST 
 
</div>