CSS process flow arrows - bad formatting?

Issue

I modified 3 different peoples code to make css arrows and I think I made it more complicated than it needs to be. Any CSS expert than can help me clean this up? I can't seem to modify padding and other attributes to get this where I want it within the divs.

css

<style>
/* These are the Stage Arrows - styles */
#testStatus {
  position: relative;
  width: auto;
  height: 30px;
  left: 10px; 
}
.testStatus li {
  position: relative;
  text-indent: 10px;
  height: 30px;
  display: inline-block;
  zoom: 1;
  margin-left: -3px;
  padding: 10px 10px 10px 10px;
  color: white;
  font-size: 12px;
  text-align: center;
  line-height: auto;
}
ul.testStatus {
  list-style: none;
  }
li.testStatus:first-child:after, li.testStatusGood:after, li.testStatusNoGood:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #767676;
    border-bottom: 15px solid transparent;
    margin: -10px 0px 0px 10px; 
    z-index: 3;
}
li.testStatus:last-child:before, li.testStatusGood:before, li.testStatusNoGood:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    left: 0;
    border-top: 15px solid transparent;
    border-left: 10px solid #EEEEEE;
    border-bottom: 15px solid transparent;
    margin: -10px 0px 0px 0px; 
    z-index: 2;
}
li.testStatus:first-child {
    padding-left: 10px;
    margin-left: 0;
    background-color: #767676;
}
li.testStatus:last-child {
    padding-right: 10px;
    background-color: #767676;
}
li.testStatusGood {
  background-color: #77a942; 
}
li.testStatusGood:after {
  border-left: 10px solid #77a942;
}
li.testStatusNoGood {
  background-color: #c42c00; 
}
li.testStatusNoGood:after {
  border-left: 10px solid #c42c00; 
}
/* End arrow formatting */
</style>

html

        <ul>
            <li>
                <div id="testStatus">
                    <ul class="testStatus">
                        <li class="testStatus">Step 1</li>
                        <li class="testStatusGood">Step 2</li>
                        <li class="testStatusNoGood">Step 3</li>
                        <li class="testStatusNoGood">Step 4</li>
                        <li class="testStatus">Step 5</li>
                    </ul>
                </div>
              
            </li>
        </ul>

My arrows display nicely but I am having difficulty adjusting the padding to 0. I've tried the #, the ul class, the il class and I am a bit baffled why I cannot remove the 10px (I believe its the padding).

There is also a faintly darker border on the left side of the triangular portion of the arrows, if you look closely, that I'd like to have match the color exactly.

Duo's code output above image, Ojer code output below image

I'm going backwards :)

Solution

Here you go:

.breadcrumbs {
  border: 1px solid #cbd2d9;
  border-radius: 0.3rem;
  display: inline-flex;
  overflow: hidden;
}

.breadcrumbs__item {
  background: #fff;
  color: #333;
  outline: none;
  padding: 0.75em 0.75em 0.75em 1.25em;
  position: relative;
  text-decoration: none;
  transition: background 0.2s linear;
}

.breadcrumbs__item:hover:after,
.breadcrumbs__item:hover {
  background: #edf1f5;
}

.breadcrumbs__item:focus:after,
.breadcrumbs__item:focus,
.breadcrumbs__item.is-active:focus {
  background: #323f4a;
  color: #fff;
}

.breadcrumbs__item:after,
.breadcrumbs__item:before {
  background: white;
  bottom: 0;
  clip-path: polygon(50% 50%, -50% -50%, 0 100%);
  content: "";
  left: 100%;
  position: absolute;
  top: 0;
  transition: background 0.2s linear;
  width: 1em;
  z-index: 1;
}

.breadcrumbs__item:before {
  background: #cbd2d9;
  margin-left: 1px;
}

.breadcrumbs__item:last-child {
  border-right: none;
}

.breadcrumbs__item.is-active {
  background: #edf1f5;
}

/* Some styles to make the page look a little nicer */
body {
  color: #323f4a;
  background: #f5f7fa;
  display: flex;
  align-items: center;
  justify-content: center;

}

html, body {
  height: 100%;
}


.gray{
background-color:gray;
}
.breadcrumbs__item.gray:after{
background-color:gray;
}

.red{
background-color:red;
}
.breadcrumbs__item.red:after{
background-color:red;
}


.green{
background-color:green;
}
.breadcrumbs__item.green:after{
background-color:green;
}

<li class="breadcrumbs">
  <a href="#Prospect" class="breadcrumbs__item gray">Prospect</a>
  <a href="#Opportunity" class="breadcrumbs__item red">Opportunity</a> 
  <a href="#Accound" class="breadcrumbs__item red">Accound</a>
  <a href="#Sales" class="breadcrumbs__item green">Sales</a> 
  <a href="#Support" class="breadcrumbs__item is-active">Support</a> 
</li>

Answered By - The Duo