在 CSS 中使用边框时背景变黑答案

【问题标题】：Background turns black when playing with border in CSS在 CSS 中使用边框时背景变黑
【发布时间】：2016-07-25 16:10:04
【问题描述】：

我在玩 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>

不出所料，出现了一个红色三角形，但后面还有一个黑色背景：

代码有什么问题？

【问题讨论】：

只需添加颜色：#fff;到.triangle。
这将改变 div 内文本的颜色。这个三角形其实就是div的下边框

标签： html css

【解决方案1】：

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

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

见fiddle

【讨论】：

【解决方案2】：

你没有设置上下边框的颜色，所以它采用继承的颜色值（由于没有设置值，默认为黑色）。要设置其他边框颜色，只需将其添加到三角形样式中即可。

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

查看演示http://codepen.io/8odoros/pen/EyLQpd

【讨论】：

不是黑色，而是继承color元素的值，请修改

【解决方案3】：

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

【讨论】：

【解决方案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;
    }

【讨论】：