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

出典：[CSSタブがアクティブなタブ上矢印]のhttps://css-tricks.com/snippets/css/css-triangle/

Answer 2

あなたはcssとjavascriptを使用します。基本的には、ユーザーがいるルートを見つけて、その場所に応じて要素にCSSを適用します。たとえば、すべてのタブに小さな三角画像があるとします。さて、デフォルトでは、CSSプロパティとして「可視性：隠し」がすべてあるとします。

javacriptで現在のパスを取得するには、window.location.pathnameを使用します。たとえば、タイムラインページで、タイムラインタブにアクティブなクラスを設定したいとします。代わりに：あなたは

var timeline = document.querySelector(<selector for your timeline tag>); 
timeline.classList.add('active'); 

のようにして、あなたのCSSで何かを行うことができ、あなたはクラスでタブを持つことになり「アクティブ」「目に見える可視性」のCSSプロパティを持っています。

本質的には、私たちがどのルートにいるかによって、CSSが追加または削除されます。ここで