Nav like triangles with CSS on li elements - html

Question

I have a series of subtabs that I want to make look like , except with more space between the items.
I am using psuedo elements and have successfully created a triangle on the right side of the element, but now I want to create an inset triangle on the left side. I have tried to use :before and with right:100% but it doesn't accomplish anything.
I was thinking I could do something like this, but no matter how I try and place it I can't seem to "cut" out a triangle from the left side....
.tabs > ul > li:before {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 0;
right: 100%;
border: 1.65em solid #fff;
}
When using the above it just cuts out a little chunk from the triangle on the right.
Full jsfiddle of the working bits. (make sure you expand the preview to large width to actually see it in action)
.tabs {
padding-top: 0.5em;
padding-bottom: 1em;
padding-right: 40px;
}
.tabs > ul {
display: flex;
justify-content: space-between;
}
.tabs > ul > li {
position: relative;
display: inline-block;
background: #eeeeee;
padding: 1em;
line-height: 1.25em;
color: #ffffff;
}
.tabs > ul > li > a {
color: #ffffff;
font-family: Lato-Regular;
font-size: 1.2em;
}
.tabs > ul > li:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 0;
left: 100%;
border: 1.65em solid transparent;
}
Update
Per Aaron's suggestion below I tried playing with z-index to get the before element to work. It looks like it's a step in the right direction but not wholly working yet. jsfiddle
1) It's not all the way to the left
2) It's a rectangle instead of a triangle

Answer 1

I did use the #Aaron answer and changed
.tabs > ul {
display: flex;
justify-content: space-between;
}
for
.tabs > ul {
display: flex;
justify-content: flex-start;
white-space: nowrap;
}
it'll look better when the width changes
here's the fiddle

Answer 2

Change the z-index of the :after pseudo to show the angle, then use the before pseudo to create the white section below the main angle.
You may have to fiddle with the height and width of the :before to make it wok exactly as you need.
.tabs {
padding-top: 0.5em;
padding-bottom: 1em;
padding-right: 40px;
}
.tabs > ul {
display: flex;
justify-content: space-between;
}
.tabs > ul > li {
position: relative;
display: inline-block;
background: #eeeeee;
padding: 1em 1em 1em 2em;
line-height: 1.25em;
color: #ffffff;
}
.tabs > ul > li > a {
color: #ffffff;
font-family: Lato-Regular;
font-size: 1.2em;
}
.tabs > ul > li:after {
position: absolute;
content: " ";
height: 0;
width: 0;
top: 0;
left: 100%;
border: 1.65em solid transparent;
z-index: 2;
}
.tabs > ul > li:before {
position: absolute;
content: "";
height: 0;
width: 0;
top: -3px;
left: 0;
border-width: 1.85em 1.65em 1.85em 1.85em;
border-style: solid;
border-color: transparent transparent transparent #fff;
z-index: 1;
}
.tabs > ul > li:nth-child(1):after {
border-left-color: red; }
.tabs > ul > li:nth-child(1) {
background: red; }
.tabs > ul > li:nth-child(2):after {
border-left-color: orange; }
.tabs > ul > li:nth-child(2) {
background: orange; }
.tabs > ul > li:nth-child(3):after {
border-left-color: gray; }
.tabs > ul > li:nth-child(3) {
background: gray; }
.tabs > ul > li:nth-child(4):after {
border-left-color: deepskyblue; }
.tabs > ul > li:nth-child(4) {
background: deepskyblue; }
.tabs > ul > li:nth-child(5):after {
border-left-color: blue; }
.tabs > ul > li:nth-child(5) {
background: blue; }
.tabs > ul > li:nth-child(6):after {
border-left-color: purple; }
.tabs > ul > li:nth-child(6) {
background: purple; }
.tabs > ul > li:nth-child(7):after {
border-left-color: green; }
.tabs > ul > li:nth-child(7) {
background: green; }
<div class="tabs">
<ul>
<li>Qualification</li>
<li>Profile</li>
<li>Skills Assessment</li>
<li>Interview Prep</li>
<li>Debrief</li>
<li>Offer</li>
<li>Follow Up</li>
</ul>
</div>