Хлебные крошки — стиль 2

Home Gallery Library Web Data

.demo{ background: #cee3f8; }
.bread-crumb{
    display: inline-block;
    padding: 0;
    margin: 0;
    border-radius: 5px 25px 25px 5px;
    overflow: hidden;
}
.bread-crumb li{
    float: left;
    margin-right: 3px;
    position: relative;
    z-index: 1;
}
.bread-crumb li:before{ display: none; }
.bread-crumb li:after{
    content: "";
    width: 40px;
    height: 100%;
    background: #428dff;
    position: absolute;
    top: 0;
    right: -20px;
    z-index: -1;
}
.bread-crumb li:nth-last-child(2):after,
.bread-crumb li:last-child:after{ display: none; }
.bread-crumb li a,
.bread-crumb li:last-child{
    display: block;
    padding: 8px 15px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    border-radius: 0 25px 25px 0;
    box-shadow: 5px 0 5px -5px #333;
}
.bread-crumb li a{ background: #428dff; }
.bread-crumb li:last-child{
    background: #ebf3fe;
    color: #428dff;
    margin-right: 0;
}
@media only screen and (max-width: 479px){
    .bread-crumb li a,
    .bread-crumb li:last-child{ padding: 8px 10px; }
}
@media only screen and (max-width: 359px){
    .bread-crumb li a,
    .bread-crumb li:last-child{ padding: 8px 7px; }
}

 <ol class="bread-crumb">
        <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>

Теги: