Breadcrumb Ribbon needs work

[slominskir]

Over the last decade the slick bread crumb CSS appears to not work so good anymore and ugly gaps show.

Either some tweaks should be done to the CSS or a new approach investigated. Possible CSS fix:

.breadcrumb li a:before {
   right: -15px; (currently -16px)
}

.breadcrumb li a:after {
   right: -14px; (currently -15px)
}

See Also:

• https://css-tricks.com/oh-the-many-ways-to-make-triangular-breadcrumb-ribbons/
• https://css-tricks.com/triangle-breadcrumbs/
• https://www.frontendplanet.com/css-breadcrumb-examples/

Note: It may be difficult to make it look good in various use cases like different web browsers, and web browsers viewed inside an RDP session (oddly appear differently). New approach may be to purposely create gap between crumbs that allow slop for different devices to render slightly off from pixel perfect.

Example:

[slominskir]

• Replaced existing .breadbox class with .banner-breadbox
• Added .ribbon-breadbox and .float-breadbox classes. See demo app.

Breadbox support has dropped transparent border approach for rotated box approach and skewed box approach.