0

I created arrow(triangle)-style breadcrumbs with CSS, no images.

jsFiddle

html:

<ul class="breadcrumb">
    <li>Home</li>
    <li>First item</li>
    <li>Second item</li>
    <li>Last item</li>
</ul>

css:

.breadcrumb {
    list-style: none;
    overflow: hidden;
}
.breadcrumb li {
    background: #F6F6F6;
    padding: 5px 0 5px 36px;
    background: #F6F6F6;
    position: relative;
    display: block;
    float: left;
}
.breadcrumb li:before {
    content:" ";
    display: block;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid #DDDDDD;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    margin-left: 1px;
    left: 100%;
    z-index: 1;
}
.breadcrumb li:after {
    content:" ";
    display: block;
    width: 0;
    height: 0;
    border-top: 25px solid transparent;
    border-bottom: 25px solid transparent;
    border-left: 20px solid #F6F6F6;
    position: absolute;
    top: 50%;
    margin-top: -25px;
    left: 100%;
    z-index: 2;
}

The problem is when parent's width is not enough to display breadcrumbs in 1 line and it takes 2 lines (or more), overflow:hidden stops working and unwanted parts of triangles get visible (http://screencloud.net/v/fQEq).

Is there a way to fix that?

user1118321
  • 25,567
  • 4
  • 55
  • 86
quotesBro
  • 6,030
  • 2
  • 31
  • 41

1 Answers1

2

Try with this style:

.breadcrumb {
    list-style: none;
    overflow: hidden;
}
.breadcrumb li:before {
    border-bottom: 15px solid transparent;
    border-left: 20px solid #dddddd;
    border-top: 15px solid transparent;
    content:" ";
    display: block;
    height: 0;
    left: 100%;
    margin-left: 1px;
    margin-top: -15px;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: 1;
}
.breadcrumb li:after {
    border-bottom: 15px solid transparent;
    border-left: 20px solid #f6f6f6;
    border-top: 15px solid transparent;
    content:" ";
    display: block;
    height: 0;
    left: 100%;
    margin-top: -15px;
    position: absolute;
    top: 50%;
    width: 0;
    z-index: 2;
}
.breadcrumb li {
    background: none repeat scroll 0 0 #f6f6f6;
    display: block;
    float: left;
    height: 20px;
    padding: 5px 0 5px 33px;
    position: relative;
}

Hope it helps!

Matas
  • 165
  • 3
  • 9
  • Thanks, I see you changed borders length so angle became sharper. Is there a way to keep the original angle? – quotesBro Nov 08 '14 at 23:00
  • 1
    You can play with heights and borders little bit. Most important thing is that ".breadcrumb li" has defined height too and if you want to change angle of triangles you will have to put overflow: hidden on "breadcrumb li" – Matas Nov 08 '14 at 23:02
  • 1
    Thank you, I have also read [How does this CSS triangle shape work?](http://stackoverflow.com/questions/7073484/how-does-this-css-triangle-shape-work) and came up with http://jsfiddle.net/T_34/hsxnb33r/11/ – quotesBro Nov 08 '14 at 23:28