I am trying to create a stepper similar to the one in this example.
I applied coloring to the stepper by using text-bg-success or text-bg-primary classes on the breadcrumb-item as following.
However, the gap in between the steps looks like a diamond shape not a chevron arrow that is pointing to the laguage direction of the page (ltr: right arrow, rtl: left arrow)
How can I change the gap between each step to an arrow instead of a diamond shape?
.breadcrumb-chevron {
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
gap: .5rem;
}
.breadcrumb-chevron .breadcrumb-item {
display: flex;
gap: inherit;
align-items: center;
padding-left: 0;
line-height: 1;
}
.breadcrumb-chevron .breadcrumb-item::before {
gap: inherit;
float: none;
width: 1rem;
height: 1rem;
}
.breadcrumb-custom .breadcrumb-item {
position: relative;
flex-grow: 1;
padding: .75rem 3rem;
}
.breadcrumb-custom .breadcrumb-item::before {
display: none;
}
.breadcrumb-custom .breadcrumb-item::after {
position: absolute;
top: 50%;
right: -25px;
z-index: 1;
display: inline-block;
width: 50px;
height: 50px;
margin-top: -25px;
content: "";
background-color: var(--bs-tertiary-bg);
border-top-right-radius: .5rem;
box-shadow: 1px -1px var(--bs-border-color);
transform: scale(.707) rotate(45deg);
}
.breadcrumb-custom .breadcrumb-item:first-child {
padding-left: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child {
padding-right: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child::after {
display: none;
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav aria-label="breadcrumb" class="my-3">
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item text-bg-success">
Step 1 </li>
<li class="breadcrumb-item text-bg-primary active" aria-current="page">
<i class="fa-solid fa-pen-to-square"></i>
<a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
Step 2
</a>
</li>
</ol>
</nav>
</div>It seems that you need to change background color and box shadow here:
.breadcrumb-custom .breadcrumb-item::after {
background-color: var(--bs-tertiary-bg);
box-shadow: 1px -1px var(--bs-border-color);
So, let it inherit background color, and box shadow could be removed, or make it inherit text color:
.breadcrumb-custom .breadcrumb-item::after {
background-color: inherit;
box-shadow: 1px -1px currentcolor;
demo:
.breadcrumb-chevron {
--bs-breadcrumb-divider: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236c757d'%3E%3Cpath fill-rule='evenodd' d='M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
gap: .5rem;
}
.breadcrumb-chevron .breadcrumb-item {
display: flex;
gap: inherit;
align-items: center;
padding-left: 0;
line-height: 1;
}
.breadcrumb-chevron .breadcrumb-item::before {
gap: inherit;
float: none;
width: 1rem;
height: 1rem;
}
.breadcrumb-custom .breadcrumb-item {
position: relative;
flex-grow: 1;
padding: .75rem 3rem;
}
.breadcrumb-custom .breadcrumb-item::before {
display: none;
}
.breadcrumb-custom .breadcrumb-item::after {
position: absolute;
top: 50%;
right: -25px;
z-index: 1;
display: inline-block;
width: 50px;
height: 50px;
margin-top: -25px;
content: "";
background-color: inherit;
border-top-right-radius: .5rem;
box-shadow: 1px -1px currentcolor;
transform: scale(.707) rotate(45deg);
}
.breadcrumb-custom .breadcrumb-item:first-child {
padding-left: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child {
padding-right: 1.5rem;
}
.breadcrumb-custom .breadcrumb-item:last-child::after {
display: none;
}<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav aria-label="breadcrumb" class="my-3">
<ol class="breadcrumb breadcrumb-custom overflow-hidden text-center bg-body-tertiary border rounded-3">
<li class="breadcrumb-item text-bg-success">
Step 1 </li>
<li class="breadcrumb-item text-bg-primary active" aria-current="page">
<i class="fa-solid fa-pen-to-square"></i>
<a class="fw-semibold text-decoration-none text-white" href="/blank1/Subscription/4c084aht14hc67nxhfpa8e9kw0/Signup/Step/Payment">
Step 2
</a>
</li>
</ol>
</nav>
</div>