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

Home Forums CSS Notched Left Navigation Re: Notched Left Navigation


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;