添加像Facebook使用的活动效果

Question

我喜欢Facebook在网站上显示活动标签的方式

但我发现它只使用了一个小图像（删除浮动后：[时间轴]框左侧）。

我确定这是一种不使用图像的方法，只能使用CSS或JavaScript或两者兼而有之。所有帮助表示赞赏。

由于PS：它可能是重复的，但我得到的答案比同类问题中的答案要好，而且这很好，无论如何，我认为不时可以提出已经问过的问题，因为有很多原因，可能是语言的版本是旧的，或者答案不是那么好，或者可能是变化计算机技术与计算机技术我们看到的术语并不足以让昨天的决定在今天出错。

Answer 1

这是一个CSS向上箭头：

.arrow-up {
   width: 0; 
   height: 0; 
   border-left: 150px solid transparent;
   border-right: 150px solid transparent;
   border-bottom: 150px solid black;
}

演示：https://codecanister.com/Project/d547eed9/2/fullscreen/b

来源：https://css-tricks.com/snippets/css/css-triangle/

Answer 2

你会使用css和javascript。基本上你会找到用户所在的路线，然后根据你的位置将一些css应用到你的元素。例如，假设所有选项卡都有这个小三角形图像。现在想象一下，默认情况下，它们都具有“visibility：hidden”作为css属性。

您可以使用window.location.pathname在javascript中获取当前路径。比如说在时间线页面上，您希望时间线选项卡具有一个活动类。你可以做点什么

{
    "loggedIn" : 1
}

并且在你的css中，你可以让“活跃”类的标签具有“visibility：visible”的css属性。

基本上所有发生的事情都是根据我们的路线添加或删除css。