Gropai Gropai - 4 months ago 9
HTML Question

Background turns black when playing with border in CSS

I was playing with CSS and wrote the following code:

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

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

As expected, a red triangle shows up, but there's also a black background behind:
enter image description here

What's wrong with the code?


You haven't set the color for top, left and right border, so it takes the inherited color value (as no value has been set, it takes black by default). To set the other borders color just add this to the triangle styles.

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

See demo