Notched Left Navigation

For the past week or so, we’ve been trying to make this possible using pure CSS, and we’re now to the point where we have no clue what to do.

I know you could do this with an image, but I really don’t want to… I’ve looked for examples for reference, but have had no such luck. Most of the examples I have found have the the notch at the bottom and use a border.

You can use the pseudo selector `::after` to semantically create new elements. Because it’s technically separated from the original element it doesn’t inherit the parents size. This should give you what you’re looking for. < http://codepen.io/BaylorRae/pen/iwynH>

Tips

Categories

We have a pretty good* newsletter.

Email Address

CSS-Tricks* is created, written by, and maintained by Chris Coyier and a team of swell people. It is built on WordPress, hosted by Media Temple, and the assets are served by MaxCDN. The fonts are Source Sans Pro and Source Code Pro. It is made possible through sponsorships from products and services we like.