在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

您应该将其他边框设置为颜色transparent

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

请参阅fiddle

Answer 2

您还没有为顶部，左侧和右侧边框设置颜色，因此它采用了继承的颜色值（因为没有设置任何值，默认情况下它采用黑色）。要设置其他边框颜色，只需将其添加到三角形样式中。

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

请参阅演示http://codepen.io/8odoros/pen/EyLQpd

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