如何在 div 底部放置箭头

你可能在网站上看到过箭头，引导你在浏览完某个部分后继续向下滚动页面。这些简单却非常有效的样式元素，有助于提升内容的流畅性。

如果您一直在尝试弄清楚如何制作这些元素，或者您正在寻找一种方法来吸引人们对其他信息的注意力，请按照这个简短的教程进行操作。

您可能需要花费 5 到 10 分钟的时间来弄清楚它的工作原理和用途，这样您就不会浪费任何时间。

您只需要 HTML 和 CSS 来制作此元素。

HTML 代码很简单。只需要一个带有类名的 div 元素。代码如下：

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

HTML 部分就到这里。现在该看看 CSS 了，这才是你需要发挥聪明才智的地方。

.bottom-arrow 类的样式很容易编写。

.bottom-arrow {
      border-bottom: 5px solid #6A0136;
}

绘制箭头的方式才是最有意思的地方。首先，你需要使用伪类选择器 :after。

在选择器内部，您需要为 content 属性设置一个值。如果您没有任何想要显示的文本，那么空字符串就可以了。

然后，您需要设置一个位置值，以便箭头停留在您为 div 设置的底部边框上。如果不设置此值，箭头将不会显示在您预期的位置。您可以自行尝试。

接下来，您需要使用 margin 属性将箭头置于 div 的中央。如果这样更适合您的设计，您也可以使用 margin 为箭头设置一个相对于中心的偏移量。

之后，继续将高度和宽度属性设置为零。这样做的原因是，如果给箭头设置了宽度，除非你使用一些疯狂的 CSS 技巧，否则它看起来就不像箭头了。高度不必设置为零，只要宽度设置为零即可，但这样做可以帮助你避免以后出现那些令人讨厌的布局意外。

最后需要设置一些边框属性。你需要设置 border-top 属性。这将用于设置箭头的高度和颜色。

接下来需要设置 border-left 和 border-right 属性。它们控制箭头的宽度。这里有个小技巧，就是不用给 border-left 和 border-right 属性设置颜色。它们需要设置为透明，因为它们负责创建箭头。

想象一下，border-left 和 border-right 属性就像从一个盒子中切出一个三角形，而这正是正在发生的事情。

以下是我们一直在讨论的 CSS 代码：

.bottom-arrow:after {
    content:'';
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 0;
    height: 0;
    border-top: 25px solid #6A0136;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
}

没那么难。你只需要知道 CSS 的工作原理以及如何操作它。做同样的事情可能有 100 种其他方法，但这就是我找到的方法。

我希望这个快速浏览能有所帮助！

嘿！你应该在 Twitter 上关注我，理由如下：https://twitter.com/FlippedCoding