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.
Now I could have easily solved this by resorting to using a image and some clever positioning to overlap the full-page bottom border of the menu, but I wanted to go with a complete CSS approach.
In this approach I am using the :before and :after pseudo-elements to add two triangles. :after will be controlling the “top” triangle, :before the bottom triangle – aka our fake border.
See it in action below. I’ve commented the CSS source to explain exactly what I did, and why. I’ve written up a brief explanation below of the process, but exploring the pen, and checking out the demo is really the easiest way to see how/why/what is making this work.
See the Pen uvxCI by Lindsey (@cssgirl) on CodePen.5514
Basically, the approach I took went like this:
The menu was already built our from previous iterations and was an unordered list. I used floats to align the list items (<li>s) all on one line. Now, within those <li>s we have our links. I also floated the <a>s to the left, and set them to display:block. This grants me more control over the links stylistically. Specifically, in this case, the ability to set a height and borders that expand the full height of the item.
Now, the item I am targeting is a list item with a class of active (<li class="active">). I want this item to have the faux triangle border effect. So, using :before and :after I create my two triangles. :before is going to be our bigger, darker triangle, while :after is going to match the background color of the body area below it, giving the appearance of a seamless transition from the body area below it to the triangle itself. The darker bottom triangle should be at least 2px greater in size than the triangle above it. In this case the indicator triangle itself has an 8px border width. The larger/darker is 10px;
I position the triangles using absolute positioning to the bottom of the menu item (make sure your <li> has been set to have relative positioning so it will stay within the bounds of the item). Using the absolute positioning I give the triangles -1px (:after triangle) and -2px (border triangle (:before)), so it will overlap the border that is along the bottom of the menu, creating that seamless illusion.
