фон становится черным, когда играет с границы в CSS

Question

Я играл с CSS и написал следующий код:

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

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

Как и следовало ожидать, красный треугольник показывает вверх, но есть и черный фон позади:

Что не так с кодом?

Answer 1

Вы не установили цвет для верхней, левой и правой границы, поэтому он берет унаследованное значение цвета (поскольку значение не установлено, по умолчанию оно занимает черное). Чтобы установить цвет других границ, просто добавьте это в стили треугольника.

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

См демонстрационная http://codepen.io/8odoros/pen/EyLQpd

Answer 2

Вы должны установить другие границы окрашивать transparent

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

См fiddle

Answer 3

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

Answer 4

Вы можете нацелить ваши border-color в два пути, то есть либо непосредственно как показано ниже,

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

, покидающие border-bottom-color т.е. назначен border-bottom это делает остальное 3 сторону прозрачными.

Или вы могли бы нацелить их по отдельности, как показано ниже для border-top т.е., border-right, border-bottom или 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; 
    }