Question

I找到了与我所说的相似的JsFiddle，点击here查看。我正在尝试在我的网站上添加类似的内容，但不是导致帖子滑动的链接我想要一个箭头。如果单击转到下一篇文章的箭头，则另一个箭头必须返回到上一篇博文。我不知道从哪里开始编程。有谁知道我是否可以删除链接并将它们变成纯粹的CSS箭头？

Answer 1

有没有人知道我是否可以删除链接并将其转换为纯CSS的箭头？

是的，你可以。

编辑您可以参考这个小提琴，了解制作箭头Demo的两个选项。

以下是制作css三角形的方法，

a.btnL {
    border-right: 20px solid brown;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 0;
    width: 0;
    display: inline-block; /* not needed but block is */
}

如果您只想要2个三角形，则需要根据其运行方式重写脚本。

这是一个更新的小提琴：Demo

Answer 2

你可以这样做：

HTML：

<div class="post-container">
    <a href="#" class="arrow left"></a>
    <a href="#" class="arrow right"></a>
    <!-- Your post -->
</div>

的CSS：

.post-container {
    position: relative;
}

.arrow {
    position: absolute;
    top: 10px;
}

.left {
    border-right: 20px solid blue;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 0;
    left: -15px;
    width: 0;
}

.right {
    border-left: 20px solid blue;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
    height: 0;
    right: 15px;
    width: 0;
}

这里有一个工作演示：http://jsfiddle.net/kYH6S/1/

将滑块添加到博客帖子？

2 个答案: