Подробное описание и демонстрация работы блока «Хлебные крошки» для сайта под номером №6 для библиотеки Bootstrap. Html и CSS код для реализации блока Breadcrumb на сайте как на изображении.
Демо блока «Хлебные крошки» — стиль 6
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Library</a></li> <li><a href="#">Web</a></li> <li class="active">Data</li> </ol>
.breadcrumb{ display: inline-block; padding: 0 30px 0 0; margin: 0; background: transparent; overflow: hidden; border-radius: 20px; } .breadcrumb li{ float: left; background: rgba(0,0,0,0.5); border-radius: 0; font-size: 14px; color: #fff; text-transform: uppercase; position: relative; } .breadcrumb li:nth-child(even){ background: rgba(0,0,0,0.8); } .breadcrumb li:last-child{ padding: 10px 25px; color: #fff; z-index: 1; position: relative; } .breadcrumb li:last-child:before{ content: ""; display: block; width: 117%; height: 101%; background: #d5172d; position: absolute; top: 0; left: 50%; z-index: -1; transform: translateX(-50%) skew(-20deg); } .breadcrumb li:before{ display: none; } .breadcrumb li a{ display: block; padding: 10px 25px; font-size: 14px; color: #fff; } @media only screen and (max-width: 767px){ .breadcrumb li a, .breadcrumb li:last-child{ font-size: 13px; padding: 10px 20px; } } @media only screen and (max-width: 480px){ .breadcrumb li a, .breadcrumb li:last-child{ padding: 5px 10px; } } @media only screen and (max-width: 360px){ .breadcrumb li a, .breadcrumb li:last-child{ font-size: 12px; padding: 5px; } }