Is it possible to make these arrows with html and css? - html

Question

I am trying to use HTML and CSS instead of images to show some arrows -- Here is the image:
I'm trying to make these arrows with before and after pseudo-elements, but I have got problems.
Here's my code:
HTML:
<ul class="steps-list">
<li class="step-item">
Contact us
</li>
<li class="step-item">
Consult with RCIC
</li>
<li class="step-item">
Apply via your pathway
</li>
<li class="step-item">
Settle in Canada
</li>
</ul>
SASS:
.steps-list {
display: flex;
.step-item {
display: inline-block;
text-align: center;
width: 25%;
.step-link {
font-weight: bold;
background: #e2e3e4;
width: 100%;
display: inline-block;
padding: 2rem 1rem;
&:hover {
#include gradient(left, $gradientList2);
}
}
}
}
I have followed this article by the way:
https://css-tricks.com/snippets/css/css-triangle/

Answer 1

[Edit] After looking at your image again, I failed to account for the first element being flat. I have updated my answer.
Using before,after, and nth-child selectors, you can achieve what you showed in your image. The before and after pseudo elements are used to create the top and bottom half of the arrows while the nth-child selectors are used to make the arrows appear to be progressively closer together.
.steps-list {
display: flex;
list-style: none;
}
.steps-list .step-item {
position: relative;
display: flex;
align-items:center;
text-align: center;
width: 25%;
}
.steps-list .step-item .step-link {
font-weight: bold;
width: 100%;
display: inline-block;
padding:10px 5px;
box-sizing:border-box;
}
.step-link::before {
content: "";
display: block;
position: absolute;
transform: skew(-40deg, 0);
background: #e2e3e4;
height: 50%;
bottom: 0;
z-index: -1;
left:5px;
}
.step-link::after {
content: "";
display: block;
position: absolute;
transform: skew(40deg, 0);
background: #e2e3e4;
height: 50%;
top: 0;
z-index: -1;
left:5px;
}
.step-item:nth-child(1){
overflow:hidden;
}
.step-item:nth-child(1) .step-link::after {
width:95%;
left:-15px;
}
.step-item:nth-child(1) .step-link::before {
width: 95%;
left:-15px;
}
.step-item:nth-child(2) .step-link::after {
width: 90%;
}
.step-item:nth-child(2) .step-link::before {
width: 90%;
}
.step-item:nth-child(3) .step-link::after {
width: 95%;
}
.step-item:nth-child(3) .step-link::before {
width: 95%;
}
.step-item:nth-child(4) .step-link::after {
width: 100%;
}
.step-item:nth-child(4) .step-link::before {
width: 100%;
}
<ul class="steps-list">
<li class="step-item">
Contact us
</li>
<li class="step-item">
Consult with RCIC
</li>
<li class="step-item">
Apply via your pathway
</li>
<li class="step-item">
Settle in Canada
</li>
</ul>

Answer 2

Check this site
.clearfix:after {
clear: both;
content: "";
display: block;
height: 0;
}
.container {
font-family: 'Lato', sans-serif;
width: 1000px;
margin: 0 auto;
}
.wrapper {
display: table-cell;
height: 400px;
vertical-align: middle;
}
.nav {
margin-top: 40px;
}
.arrow-steps .step {
font-size: 14px;
text-align: center;
color: #666;
cursor: default;
margin: 0 3px;
padding: 10px 10px 10px 30px;
min-width: 180px;
float: left;
position: relative;
background-color: #d9e3f7;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
transition: background-color 0.2s ease;
}
.arrow-steps .step:after,
.arrow-steps .step:before {
content: " ";
position: absolute;
top: 0;
right: -17px;
width: 0;
height: 0;
border-top: 19px solid transparent;
border-bottom: 17px solid transparent;
border-left: 17px solid #d9e3f7;
z-index: 2;
transition: border-color 0.2s ease;
}
.arrow-steps .step:before {
right: auto;
left: 0;
border-left: 17px solid #fff;
z-index: 0;
}
.arrow-steps .step:first-child:before {
border: none;
}
.arrow-steps .step:first-child {
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
}
.arrow-steps .step span {
position: relative;
}
<div class="container">
<div class="wrapper">
<div class="arrow-steps clearfix">
<div class="step current"> <span> Step 1</span> </div>
<div class="step"> <span>Step 2 some words</span> </div>
<div class="step"> <span> Step 3</span> </div>
<div class="step"> <span>Step 4</span> </div>
</div>
</div>
</div>