How to do continuous arrow boxes in CSS HTML - css

Question

any idea how to do something like this?
i know they're just boxes with modifications to css but Im new to css so any kind of help would be useful. thank you
im doing this by doing the following below. But there is a space in between the boxes. I wanted to achieve the arrow covering the space between each box
.box {
display: block;
width: 100%;
margin: 0 auto;
padding: 50px 20px;
text-align: center;
overflow: hidden;
}
.box-item {
display: block;
position: relative;
float: left;
width: calc(100% / 3 - 7px);
height: 40px;
line-height: 40px;
margin-right: 10px;
padding: 0 10px;
background-color: #3a7cca;
border-radius: 4px;
color: #ffffff;
}
.box-item:before {
content: "";
position: absolute;
right: -9px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #3a7cca;
border-radius: 4px;
}
.box-item:after {
content: "";
position: absolute;
left: -1px;
height: 0;
width: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-left: 10px solid #fff;
border-radius: 4px;
}
.box-item:first-child:after {
display: none;
}
.box-item:last-child {
margin-right: 0;
}
.box-item:last-child:before {
display: none;
}

Answer 1

Try to use display: flex and flex-direction: row-reverse for the parent block. So each next .box-item will be placed "under" the previous, and you will be able to adjust space between items by changing margin-right.
.box {
display: flex;
flex-direction: row-reverse;
padding: 50px 20px;
}
.box-item {
align-items: center;
background: #3a7cca;
border-radius: 4px;
color: white;
display: flex;
flex-grow: 1;
height: 40px;
justify-content: center;
margin-right: 2px;
position: relative;
}
.box-item:before,
.box-item:after {
border-color: transparent;
border-style: solid;
border-width: 20px 0 20px 10px;
border-radius: 4px;
content: "";
height: 0;
position: absolute;
top: 0;
width: 0;
}
.box-item:before {
left: -1px;
border-left-color: white;
}
.box-item:after {
right: -9px;
border-left-color: #3a7cca;
}
.box-item:first-child {
margin-right: 0;
}
.box-item:last-child:before,
.box-item:first-child:after {
display: none;
}
<div class="box">
<div class="box-item">3</div>
<div class="box-item">2</div>
<div class="box-item">1</div>
</div>