Tag Archives: pseudo-elements

CSS Triangles with a Faux Border/Shadow for Navigation Indicators

Apr
6

No Comments - LEAVE A COMMENT

So today I ran into a conundrum as I was working on the “active” state for a menu for my one of my client’s redesign of their corporate site.

In the design there is an active state of a little triangle indicating what section is active as a full width submenu slides down from beneath the main menu (that tutorial is the works).

So the triangle itself isn’t a problem. I easily created that using the :after psuedo-element.

The problem I ran into was the triangle itself has a border on the left and right sides and then extends across the page beneath the menu.

nav-triangle

CONTINUE READING...