Gropai Gropai - 1 year ago 93
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?

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download