javascript - 如何实现厚度可变的滚动页面箭头按钮？

Question

我想知道如何更改我网站上用作滚动按钮的箭头的粗细。我想要在厚度方面类似于此网站箭头的东西。 example of arrow

Here is my codepen

.next {
  position:absolute;
  bottom:0;
  left:50%;
  margin-left:-40px;
  transform:rotate(-90deg);
  cursor:pointer;
}

亲切的问候，

利亚姆。

Answer 1

在示例中，您链接到箭头的实现方式与笔中的不同。这是如何完成的:

#arrow {
  border: 3px solid black;
  height: 50px;
  width: 50px;
  transform: rotate(45deg) translateY(-15px) translateX(5px);
  border-top: none;
  border-left: none;
}

<div id="arrow"></div>

基本上，您创建一个正方形，将其旋转 45 度并在右侧和底部添加边框。现在您只需更改 border 属性中的边框粗细即可更改箭头宽度。

附言你可以使用 Chrome Developer Tools检查网站上的元素。 IE。如果您喜欢某些网站上的内容，您可以看看他们是如何实现的。