Hintergrund wird schwarz, wenn sie mit Grenze in CSS spielen

Question

ich mit CSS spielte und schrieb den folgenden Code:

<style> 
    .triangle { 
     border-width: 50px; 
     border-style: solid; 
     width: 0; 
     height: 0; 
    } 
    #triangle1 { 
     border-bottom-color: red; 
    } 
</style> 

<div id="triangle1" class="triangle"></div> 

Wie erwartet, ein rotes Dreieck zeigt, aber es gibt auch einen schwarzen Hintergrund hinter:

Was ist falsch mit dem Code?

Answer 1

Sie haben die Farbe für den oberen, linken und rechten Rand nicht festgelegt, daher wird der ererbte Farbwert verwendet (da kein Wert festgelegt wurde, wird standardmäßig Schwarz verwendet). Um die andere Rahmenfarbe einzustellen, fügen Sie diese einfach zu den Dreieckstilen hinzu.

border-top-color: transparent; 
border-left-color: transparent; 
border-right-color: transparent; 

Siehe Demo http://codepen.io/8odoros/pen/EyLQpd

Answer 2

Sie sollten die anderen Grenzen gesetzt transparent

.triangle { 
    ... 
    border-color: transparent; 
    ... 
} 

Siehe fiddle

Answer 3

#triangle1 { 
    border-color: white white red; 
} 

Answer 4

Sie färben können Ihre border-color auf zwei Arten, dh entweder direkt Ziel wie unten,

.triangle { 
     border-width: 50px; 
     border-style: solid; 
     width: 0; 
     height: 0; 
    } 
#triangle1 { 
     border-color:transparent; 
     border-bottom-color: red; 
    } 

Verlassen der border-bottom-color d.h zu border-bottom zugewiesen es 3 Seite wie transparent bleiben macht.

Oder Sie könnten sie einzeln gezielt, wie weiter unten heißt für border-top, border-right, border-bottom oder border-left.

.triangle { 
     border-width: 50px; 
     border-style: solid; 
     width: 0; 
     height: 0; 
    } 
#triangle1 { 
     border-top-color:transparent; 
     border-right-color:transparent; 
     border-left-color:transparent; 
     border-bottom-color: red; 
    }