CSS process flow arrows - bad formatting? - html

Question

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 :)

Answer 1

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">
Prospect
Opportunity
Accound
Sales
Support
</li>

Answer 2

This can work for you.
Check this Pen
HTML:
<ul class="steps">
<li class="past">
<span>
<strong>Step 1</strong>
</span><i></i>
</li>
<li class="present">
<span>
<strong>Step 2</strong>
</span><i></i>
</li>
<li class="future">
<span>
<strong>Step 3</strong>
</span><i></i>
</li>
<li class="future1">
<span>
<strong>Step 4</strong>
</span><i></i>
</li>
<li class="present1">
<span>
<strong>Step 5</strong>
</span><i></i>
</li>
</ul>
CSS:
.steps {
padding-left: 0;
list-style: none;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
line-height: 1;
margin: 30px auto;
border-radius: 3px;
}
.steps strong {
font-size: 14px;
display: block;
line-height: 2.1;
}
.steps > li {
position: relative;
display: block;
/* border: 1px solid #ddd; */
padding: 12px 50px 8px 50px;
width: 140px;
height: 40px;
}
#media (min-width: 768px) {
.steps > li {
float: left;
}
.steps .past {
color: #fff;
background: blue;
}
.steps .present {
color: #000;
background: yellow;
}
.steps .future {
color: #fff;
background: green;
}
.steps .present1 {
color: #000;
background: red;
}
.steps .future1 {
color: #fff;
background: purple;
}
.steps .present1 {
color: #fff;
}
.steps li > span:after,
.steps li > span:before {
content: "";
display: block;
width: 0px;
height: 0px;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: #f0f0f0;
border-width: 30px;
}
.steps li > span:after {
top: -4px;
z-index: 1;
border-left-color: white;
border-width: 34px;
}
.steps li > span:before {
z-index: 2;
}
.steps li.past + li > span:before {
border-left-color: blue;
}
.steps li.present + li > span:before {
border-left-color: yellow;
}
.steps li.future + li > span:before {
border-left-color: green;
}
.steps li.future1 + li > span:before {
border-left-color: purple;
}
.steps li:first-child > span:after,
.steps li:first-child > span:before {
display: none;
}
/* Arrows at start and end */
.steps li:first-child i,
.steps li:last-child i {
display: block;
position: absolute;
top: 0;
left: 0;
border: solid transparent;
border-left-color: white;
border-width: 30px;
}
.steps li:last-child i {
left: auto;
right: -30px;
border-left-color: transparent;
border-top-color: white;
border-bottom-color: white;
}
}