html - 如何使用 CSS 创建向下箭头？

Question

我尝试使用呈现如下的 HTML 代码 ⇩ 创建一个白色向下箭头:⇩。
但是我无法填充它并且箭头上方和下方有很多空间。

如何使用 CSS 创建相同的内容？

Answer 1

body{font-size:30px;}
i.arrow-down{
  color: #f0f;
  width:  0.5em;
  height:  0.7em;
  display:  inline-block;
  position:  relative;
  background:  currentColor;
  vertical-align: top;
} i.arrow-down:after{
  border-right:  0.5em solid transparent;
  border-left:  0.5em solid transparent;
  border-top:  0.4em solid currentColor;
  position:  absolute;
  content:  "";
  bottom:  -0.3em;
  left:  -0.22em;
}

Arrow Down <i class="arrow-down"></i>