Question

我尝试使用HTML代码⇩创建白色向下箭头，其呈现方式如下：⇩。
但是我无法填充它，箭头上方和下方都有很多空间。

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

Answer 1

＆＃13;

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;
}

＆＃13;

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

＆＃13;

Answer 2

向下箭头↓的HTML代码为↓

Answer 3

对我来说似乎很多工作，您是否考虑过使用图标？然后你就可以调整它们的颜色，着色它们，转换它们等等。

http://fontawesome.io/icons/

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

3 个答案: