如何创建带有灰色边框的透明三角形CSS

Question

我想创建一个白色但有细灰色边框的三角形。我已经尝试过此代码

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

但这给了我充满红色的三角形。

Answer 1

您只需旋转箭头div并调整边框颜色即可。

箭头的内部可以是您想要的任何颜色...在这里它是透明的，因为没有应用背景色。

.arrow-down {
  width: 20px;
  height: 20px;
  border-width:1px;
  border-style:solid;
  border-color:transparent grey grey transparent;
  transform:rotate(45deg);
}

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