How do i create transparent triangle with thin gray borders css

Question

I want to create a triangle that is white but has got thin gray borders. I have tried this code

.arrow-down {
  width: 0;
  height: 0;
  border-top: 20px solid #f00;
  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

<div class="arrow-down"></div>

But it gave me triangle filled with red.

Answer 1

did you mean something like this?
You can change the color of the border with: border-top-color: #B1B1B1;
Once you would like change the dimensions of the triangle, you have to change it everywhere.

.arrow-down {
  position: relative;
}
.arrow-down:after,
.arrow-down:before {
  border-top: 20px solid white;
  border-left: 20px solid transparent;
  border-right: 20px solid transparent;
  margin-left: -20px;
  position: absolute;
  bottom: -20px;
  content: '';
  left: 50%;
}
.arrow-down:before {
  border-right: 20px solid transparent;
  border-top: 20px solid;
  border-left: 20px solid transparent;
  border-top-color: #B1B1B1;
  bottom: -22px;
  margin-left: -20px;
}

<div class="arrow-down"></div>