triangle won't change color

Question

I made a div triangle and it is placed perfectly. When I put it in I wanted it to be a different color than grey. So I went back to my class (css) and put background: red and it changed the area around it red not the triangle itself. If you can help it would be appreciated!

.triangle {
  width: 10px;
  height: 0px;
  border-left: 1030px solid transparent;
  border-right: 1030px solid transparent;
  border-bottom: 500px solid #555;
  position: absolute;
  left: -322px;
  top: 160px;
  z-index: -1;
  background: red;
}

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

score 0 · Accepted Answer · answered Mar 18 '19 at 00:29

0

The triangle is made out of a border, so the only way to change the color is to change the border color. The snippet below works.

.triangle {
  width: 10px;
  height: 0px;
  border-left: 1030px solid transparent;
  border-right: 1030px solid transparent;
  border-bottom: 500px solid red;
  position: absolute;
  left: -322px;
  top: 160px;
  z-index: -1;
}

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

answered Mar 18 '19 at 00:29

Aniket G

3,471
1
13
39

Wow, i didn't even see the color tag there. Sorry i am a noob – Easton Antony Mar 18 '19 at 00:31

score 0 · Answer 2 · answered Mar 18 '19 at 00:30

0

Change the border-bottom instead

border-bottom: 500px solid red;

answered Mar 18 '19 at 00:30

Leo

14,625
2
37
55

triangle won't change color

2 Answers2