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

如何在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;
}

这是结果：

但我试着建造这样的东西：

---

有什么建议吗？

你想要的是一个V形而不是箭头。纯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);
}

看看这个

#向上箭头：在{
内容：“\276F”；
}
#向下箭头：之前{
内容：“\276E”；
}
#向上、向下{
字体大小：30px；
显示：内联块；
-ms变换：旋转（90度）；
-webkit变换：旋转（90度）；
变换：旋转（90度）；
填充：10px；
}

---

如果不想使用图标，可以使用：：before和：：after伪类

这是在纯CSS中获得箭头的多种方法之一

HTML

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

你可以在这里找到一个例子：

我的建议是：

.triangle\u向下{
宽度：0；
身高：0；
左边框：15px实心透明；
右边框：15px实心透明；
边框顶部：15px实心#2f；
字号：0；
线高：0；
浮动：左；
}
1.三角下降1{
位置：相对位置；
顶部：-5px；
内容：“；
显示：内联块；
宽度：15px；
高度：15px；
右边框：0.2米纯黑色；
边框顶部：0.2米纯黑；
变换：旋转（135度）；
右边距：0.5em；
左边距：1.0em；
}
.三角形_up1{
位置：相对位置；
顶部：-5px；
内容：“；
显示：内联块；
宽度：15px；
高度：15px；
右边框：0.2米纯黑色；
边框顶部：0.2米纯黑；
变换：旋转（-45度）；
右边距：0.5em；
左边距：1.0em；
}

更现代的方法是在

：before

或

：：after

伪类中使用css的

内容

属性。有很多可用的图标/符号字体，你可以用它们来填充内容，以实现你想要的。这是一个箭头，他想要的是一个V形，我相信。@Arcaneraeda你检查我的编辑了吗？那是一个V形，我没有。这可能是首选的解决方案。有什么方法可以定制吗？@Arcanecaraeda定制形状、厚度、高度等。我的意思是他们可能不需要它，我只是好奇这是否可能。

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