Sign Board like Buttons design via css - html

Question

Buttons design link down below
I need this design tried via before after but need the arrow softer
used skew and all.
also found references but that didn't work out, it seems very easy and similar design but couldn't find similar ones on the internet via examples.
https://i.stack.imgur.com/BCRNb.png

Answer 1

#import url('https://fonts.googleapis.com/css2?family=Montserrat:wght#100&family=Poppins:wght#300&display=swap');
body {
background: #fff;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-family: 'Montserrat', sans-serif;
font-family: 'Poppins', sans-serif;
}
/* ------------------------- Separate line ------------------------- */
:root {
--breadcrumb-theme-1: #398AB9;
--breadcrumb-theme-2: #DFDFDE;
--breadcrumb-theme-3: #1C658C;
--breadcrumb-theme-4: #FFF;
}
a{
font-size: medium;
}
.breadcrumb {
text-align: center;
display: inline-block;
box-shadow: 0 2px 5px rgba(0,0,0,0.25);
overflow: hidden;
border-radius: 5px;
counter-reset: flag;
}
.breadcrumb__step {
text-decoration: none;
outline: none;
display: block;
float: left;
font-size: 14px;
font-weight:bold;
line-height: 36px;
padding: 0 10px 0 30px;
position: relative;
background: var(--breadcrumb-theme-2);
color: var(--breadcrumb-theme-1);
transition: background 0.5s;
}
.breadcrumb__step:first-child {
border-radius: 5px 0 0 5px;
}
.breadcrumb__step:first-child::before {
left: 14px;
}
.breadcrumb__step:last-child {
border-radius: 0 5px 5px 0;
padding-right: 20px;
}
.breadcrumb__step:last-child::after {
content: none;
}
.breadcrumb__step::after {
content: '';
position: absolute;
top: 0;
right: -18px;
width: 36px;
height: 36px;
transform: scale(0.707) rotate(45deg);
z-index: 1;
border-radius: 0 5px 0 50px;
background: var(--breadcrumb-theme-2);
transition: background 0.5s;
box-shadow: 2px -2px 0 2px var(--breadcrumb-theme-4);
}
.breadcrumb__step--active {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step--active::after {
background: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover {
color: var(--breadcrumb-theme-2);
background: var(--breadcrumb-theme-3);
}
.breadcrumb__step:hover::before {
color: var(--breadcrumb-theme-1);
}
.breadcrumb__step:hover::after {
color: var(--breadcrumb-theme-1);
background: var(--breadcrumb-theme-3);
}
<div class="breadcrumb">
<a class="breadcrumb__step breadcrumb__step--active" href="#">Choose product</a>
<a class="breadcrumb__step" href="#">Place order</a>
<a class="breadcrumb__step" href="#">Shiping</a>
<a class="breadcrumb__step" href="#">Booking</a>
<a class="breadcrumb__step" href="#">Complete</a>
</div>