如何在CSS中创建向下/向上箭头

Question

如何在CSS中创建箭头指向上/下的样式？

我尝试使用div来构建它：

.triangle_down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #2f2f2f;
  font-size: 0;
  line-height: 0;
  float: left;
}

<div class="triangle_down"></div>

这是结果：。

但我尝试构建类似于这样的东西：

有什么建议吗？

- Maor Avitan

---

更现代的方法是使用CSS中::before或::after伪类的content属性。有许多可用的图标/符号字体，您可以使用它们来填充内容以实现您想要的效果。 - charlietfl

Answer 1

我的建议是：

.triangle_down {
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid #2f2f2f;
  font-size: 0;
  line-height: 0;
  float: left;
}
.triangle_down1 {
  position: relative;
  top: -5px;
  content: "";
  display: inline-block;
  width: 15px;
  height: 15px;
  border-right: 0.2em solid black;
  border-top: 0.2em solid black;
  transform: rotate(135deg);
  margin-right: 0.5em;
  margin-left: 1.0em;
}
 .triangle_up1 {
   position: relative;
   top: -5px;
   content: "";
   display: inline-block;
   width: 15px;
   height: 15px;
   border-right: 0.2em solid black;
   border-top: 0.2em solid black;
   transform: rotate(-45deg);
   margin-right: 0.5em;
   margin-left: 1.0em;
 }

<div id="dialog1" class="triangle_down"></div>
<div id="dialog2" class="triangle_down1"></div>
<div id="dialog3" class="triangle_up1"></div>

- gaetanoM

Answer 2

如果您不想使用图标，可以使用::before和::after伪类。这是纯CSS中获得箭头的各种方式之一。

HTML

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

CSS

.arrow {
  position: absolute;
  top: 20px;
  left: 20px;
}

.arrow::before,
.arrow::after {
  position: relative;
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: #000;
}

.arrow::before {
  transform: rotate(45deg);
}

.arrow::after {
  left: 14px;
  transform: rotate(-45deg);
}

您可以在这里找到一个例子：https://jsfiddle.net/f3qpujpL/2/

- fbid

Answer 3

#uparrow:before {
    content: '\276F';
}

#downarrow:before {
    content: '\276E';
}

#uparrow, #downarrow {
    font-size: 30px;
    display: inline-block;
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    padding: 10px;
}

<span id="uparrow"></span><span id="downarrow"></span>

你可以像这样包含Unicode字符，它们现今几乎被任何系统所使用。在此处查看其外观：https://jsfiddle.net/mcdbu2pj/2/ 只需找到你想要的正确的Unicode字符即可。无论它们朝向哪个方向，你都可以旋转它们（就像我做的那样）。请记得将它们的显示属性设置为inline-block！

- MortenMoulder

---

这是一个箭头，我相信他想要一个矢形。 - GAntoine

@ArcaneCraeda 你看了我的编辑吗？那是一个尖括号。 - MortenMoulder

我没有这样做。这可能是首选解决方案。有没有办法自定义它？ - GAntoine

@ArcaneCraeda 你的意思是要进行什么样的定制？ - MortenMoulder

形状、厚度、高度等等。我的意思是他们可能不需要它，我只是好奇它是否可能。 - GAntoine

Answer 4

你想要的是一个 chevron（人字形），而不是箭头。纯 CSS 解决方案：

.chevron::before {
    border-style: solid;
    border-width: 0.15em 0.15em 0 0;
    content: '';
    display: inline-block;
    height: 0.45em;
    left: 0.15em;
    top: 0.15em;
    vertical-align: top;
    width: 0.45em;
    transform: rotate(135deg);
}

查看这个JSFiddle。

- GAntoine

Answer 5

.arrow {
  border: solid black;
  border-width: 0 3px 3px 0;
  display: inline-block;
  padding: 3px;
}

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
}

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
}

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

<p>Right arrow: <i class="arrow right"></i></p>
<p>Left arrow: <i class="arrow left"></i></p>
<p>Up arrow: <i class="arrow up"></i></p>
<p>Down arrow: <i class="arrow down"></i></p>

- SAM

---

你应该添加解释。 - Super Kai - Kazuya Ito

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

这应该是被接受的答案。它提供了最简单和清晰的解决方案，并明确地说明了如何使用CSS变换和边框来生成向右、向左、向上和向下的箭头，以一种清晰而紧凑的方式。谢谢！ - undefined

Answer 6

简单到不能再简单了：

.up,
.down {
  content: "";
  width: 10px;
  height: 10px;
  border: solid black;
  border-width: 1px 1px 0 0;
}

.up {
  transform: rotate(-45deg);
}

.down {
  transform: rotate(135deg);
}

<div class="up"></div>
<div class="down"></div>

- Franc Jerez

Answer 7

根据您需要的箭头类型，使用HTML符号代码有一个非常简单的方法。例如，我使用↑表示向上指的箭头。 我在这里找到了它 HTML Symbols。

- Guppy