<div>三角形不会改变颜色

Question

我制作了一个div三角形，并将其完美放置。当我放入它时，我希望它的颜色不同于灰色。因此，我回到班级（css）并将background: red放到它周围，将其周围的区域更改为红色而不是三角形本身。如果可以的话，将不胜感激！

.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>

Answer 1

三角形是由边框组成的，因此更改颜色的唯一方法是更改​​边框颜色。以下代码段有效。

.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>

Answer 2

改为更改border-bottom

border-bottom: 500px solid red;