我如何创建带有细灰色边框的透明三角形 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

你的意思是这样的吗？
你可以改变边框的颜色：border-top-color: #B1B1B1;
一旦你想改变三角形的尺寸，你有到处改变它。

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

Answer 2

您只需旋转箭头 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>

Answer 3

.arrow-down {
  border: solid black;
  border-width: 0 .12em .12em 0;
  display: inline-block;
  padding: .20em;
  transform: rotate(45deg);
}

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

How do i create transparent triangle with thin gray borders css

css

css-shapes