The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS Notched Left Navigation

  • This topic is empty.
Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
  • #42226

    A client has asked my friend and I to create their left navigation similar to PowerPoint’s 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.

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


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


    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. <>

    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;


    @rosspenman It’s the left menu.

    and Thanks @Paulie_D!

Viewing 6 posts - 1 through 6 (of 6 total)
  • The forum ‘CSS’ is closed to new topics and replies.