Notched Left Navigation

[kylesneaux]

A client has asked my friend and I to create their left navigation similar to PowerPoint’s navigation (http://support.microsoft.com/Library/Images/2777435.png).

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.

http://codepen.io/ksneaux/pen/rfvwo

It looks dreadful, I know, but we’re not sure anymore. If anyone can spare some thoughts or ideas, please let me know.

[rosspenman]

I’m not entirely clear on which part of PowerPoint you’re trying to replicate? The left menu? The top?

[BaylorRae]

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>

Here’s the bit of code used to make it work.

li {
border: 1.25em solid #ddd;
position: relative;
}

li:after {
content: ”;

/* position the arrow */
position: absolute;
right: -1.25em;
top: 50%;
margin-top: -10px;

/* create the arrow */
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;

/* change the arrow color */
border-right:10px solid #fff;
}

[Paulie_D]

Best I can do: http://codepen.io/anon/pen/dejIq

[kylesneaux]

@rosspenman It’s the left menu.

and Thanks @Paulie_D!

[rosspenman]

Here’s my attempt.
http://codepen.io/rosspenman/pen/zhsIu

[Author]

Posts