Nasıl Yapılır - Basit Breadcrumb Tasarımı

Orjinal Hali:

Sonraki Hali:

//Breadcrumb
//Background & Text Color
.p-breadcrumbs {flex: 1 1 auto; width: 100%; font-size: 12px;border-color: #374166;border-radius: 4px;overflow: hidden;position: relative; z-index: 0;
    color: #333333;
    background: white;
max-height:48px;
}
// Arrow color - (Border-color)
.p-breadcrumbs>li a::before, .p-breadcrumbs>li a::after {border-style: solid;border-width: 0;border-right-width: 1px; box-shadow: inset currentColor -1px 0px 0px 0px; content: ''; position: absolute;height: 50%;width: 100%;right: 0; z-index: -1;box-sizing: border-box;transform-origin: 100% 50%;
    border-color: #d6d6d6;
    color: rgba(255,255,255,0.38);
}
// Hover color
.p-breadcrumbs>li a:hover::before, .p-breadcrumbs>li a:hover::after {
    background: #dedede;
}

.p-breadcrumbs::before { display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 0px; border-radius: inherit; pointer-events: none;  z-index: 2;}
.p-breadcrumbs:before, .p-breadcrumbs:after {content: " ";display: table;}
.p-breadcrumbs>li {margin: 0;  padding-left: 15px; float: left; margin-right: -1.5em;font-size: 13px;}
.p-breadcrumbs>li:after { content: ""; width: 1.28571429em; display: inline-block; text-align: center;}
.p-breadcrumbs>li a {padding: 10px 15px;position: relative;z-index: 1;display:inline-block;overflow: visible;max-width: none;text-decoration: none;color: inherit;margin-left: -15px;}
.p-breadcrumbs>li a::before {top: 0;transform: skewX(35deg);}
.p-breadcrumbs>li a::after {top: 50%;transform: skewX(-35deg);}
.p-breadcrumbs>li:first-child span:before { font-family: 'Font Awesome 5 Pro';font-size: inherit;font-style: normal; font-weight: 700;font-size: 14px;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale; content: "\f015";padding-right: 5px;}
.p-breadcrumbs>li:first-of-type a {font-size: 0;}
.p-breadcrumbs>li:first-of-type a::before, .p-breadcrumbs>li:first-of-type a::after {width: calc(100% + 20px);}
@media (max-width: 480px){.p-breadcrumbs > li:before {content: "";}}