CSS -хлебные крошки реагируют на индивидуальную форму ⇐ CSS

[Anonymous]

Я пытался реализовать рисунок хлебной крошки, в котором элементы хлебной крошки формируются в виде изображения ниже:

rurob -rup -shap shap shap -rarob -rup -rup -rup -rup -rup -rup -rup -shap Регулируется по ширине и, возможно, незначительные изменения на высоте. #BBBCC4 и имеет небольшую тень из коробки: 0 1 2px 0 #37415114; < /p>
Это не простой хлебный хлебный каплей с прямой стрелкой. Заранее спасибо! < /P>

Код: Выделить всё

.breadcrumbs {
display:flex;
margin-top: 60px;
}

.breadcrumb-item {
display:flex;
align-items:center;
background: #efefef;
min-height:60px;
min-width:186px;
}

.breadcrumb-item span {
margin-left:20px;
}

.polygon {
clip-path: polygon(0% 0%, 20px 50%, 0% 100%, calc(100% - 20px) 100%, 100% 50%, calc(100% - 20px) 0%);
}

.path {
position: relative;
background:red;
clip-path: path('M168.723 3.01544C168.011 1.76914 166.685 1 165.25 1H7.46392C4.39263 1 2.46716 4.31793 3.99095 6.98456L15.4372 27.0154C16.1399 28.2452 16.1399 29.7548 15.4372 30.9846L3.99095 51.0154C2.46716 53.6821 4.39263 57 7.46392 57H165.25C166.685 57 168.011 56.2309 168.723 54.9846L182.437 30.9846C183.14 29.7548 183.14 28.2452 182.437 27.0154L168.723 3.01544Z');

}

.mask {
background:lime;
mask: url('data:image/svg+xml;utf8,') center/contain no-repeat;
mask-mode: alpha; /* Usa o canal alpha (transparência) do SVG */
mask-repeat: no-repeat;
}< /code>





















Подробнее здесь: [url]https://stackoverflow.com/questions/79618250/css-breadcrumbs-responsive-custom-shape[/url]