Some CSS help please

[john1]

Hi folks, I am trying to do this:

but having big problems.

This is my snippet:

https://jsfiddle.net/5Lz3ravf/

But it looks nothing like it!

Hellllp please

[naphong]

You clip-path is the problems.
Change to this:

-webkit-clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);

Hope this help

[sorinr]

Here some insiration https://codyhouse.co/gem/css-breadcrumbs-and-multi-step-indicator or you can try using svg for the breadcrumbs. Another one here: https://line25.com/tutorials/how-to-create-flat-style-breadcrumb-links-with-css

[john1]

Thanks for this!

I want each arrow to be the same width, even when I use !important it still doesn’t work:

https://jsfiddle.net/5Lz3ravf/36/

Thanks for the help

[john1]

Ah these are really nice, thank you!