Mr Geek Mr Geek - 4 months ago 9
Javascript Question

Adding an active effect like the one Facebook uses

I liked the way how Facebook indicates an active tab on the website.

enter image description here

But I found out that it uses just a small image (after removing the float:left of the [Timeline] box).
enter image description here

I'm sure there's a way of doing without using images, only with CSS or JavaScript or both. All help appreciated.

Answer

Here is a CSS up arrow:

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

Demo: https://codecanister.com/Project/d547eed9/2/fullscreen/b

Source: https://css-tricks.com/snippets/css/css-triangle/