Стильные хлебные крошки на CSS3

<div id="breadcrumbs">
	<div class="button">
		<span class="label">Главная</span>
	</div>
	<div class="button">
		<span class="label">Продукты</span>
	</div>
	<div class="button">
		<span class="label">Цвета</span>    
	</div>
	<div class="button">
		<span class="label">Белый</span>
	</div>            
</div>

* {
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     margin: 0;
     padding: 0;
     font-family: sans-serif;
     font-size: 12px;
}
 
body {background-color: #d3d7cf;}
 
#breadcrumbs {
    display: inline-block;
    margin: 10px;
    border-radius: 10px;
    box-shadow:0 0 1px rgba(0,0,0,0.5);
}
.button {
    display: inline-block;
    cursor: pointer;
    margin-right: -3px;
    box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
    background-color: #729fcf;
    background: -moz-linear-gradient(top, #729fcf, #3465a4);
    background: -o-linear-gradient(top, #729fcf, #3465a4);
    background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
}
 
.button:hover {
    background-color: #3465a4;
    background: -moz-linear-gradient(bottom, #729fcf, #3465a4);
    background: -o-linear-gradient(bottom, #729fcf, #3465a4);
    background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}
 
.button:first-child {border-radius: 10px 0 0 10px;}
 
.button:last-child {border-radius: 0 10px 10px 0;}
 
.label {
    text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
    color: white;
    height: 30px;
    padding: 8px;
    -moz-user-select: none;
    -webkit-user-select: none;
    display: inline-block;
}
 
.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}
 
.button:first-child .label {padding-left: 15px;}
 
.button:last-child .label {padding-right: 15px;}
 
.button:last-child .arrow {display: none;}

<span class="arrow"><span></span></span>

.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;}
 
.arrow span {
    border-radius: 5px;
    width: 24px;height: 24px;
    display: inline-block;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    margin-left: -13px;
    margin-top: 3px;
    box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);
    background-color: #729fcf;
    background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
    background: -o-linear-gradient(135deg, #3465a4, #729fcf);
    background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));
}
 
.arrow:hover span {
    background-color: #3465a4;
    background: -moz-linear-gradient(135deg, #729fcf, #3465a4);
    background: -o-linear-gradient(135deg, #729fcf, #3465a4);
    background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));
    box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);
}

<div id="breadcrumbs">
	<div class="button">
		<span class="label">Главная</span>
		<span class="arrow"><span></span></span>
	</div>
	<div class="button">
		<span class="label">Продукты</span>
		<span class="arrow"><span></span></span>
	</div>
	<div class="button">
		<span class="label">Цвета</span>
		<span class="arrow"><span></span></span>        
	</div>
	<div class="button">
		<span class="label">Белый</span>
		<span class="arrow"><span></span></span>
	</div>            
</div>

* {
 box-sizing: border-box;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 margin: 0;
 padding: 0;
 font-family: sans-serif;
 font-size: 12px;
}
body {background-color: #d3d7cf;}
 
#container
{
 width: 285px;
 margin: 0 auto;
 margin-top: 23%;
}
 
#breadcrumbs {
 display: inline-block;
 margin: 10px;
 padding-right: 18px;
 border-radius: 10px;
 box-shadow:0 0 1px rgba(0,0,0,0.5);
 
}
.button {
 display: inline-block;
 cursor: pointer;
 margin-right: -20px;
 box-shadow: inset 0 -1px 1px rgba(0,0,0,0.25), inset 0 1px 1px rgba(255,255,255,0.25);
 background-color: #729fcf;
 background: -moz-linear-gradient(top, #729fcf, #3465a4);
 background: -o-linear-gradient(top, #729fcf, #3465a4);
 background: -webkit-gradient(linear, left top, left bottom, from(#729fcf), to(#3465a4));
}
.button:hover {
 background-color: #3465a4;
 background: -moz-linear-gradient(bottom, #729fcf, #3465a4);
 background: -o-linear-gradient(bottom, #729fcf, #3465a4);
 background: -webkit-gradient(linear, left bottom, left top, from(#729fcf), to(#3465a4));
 box-shadow: inset 0 1px 1px rgba(0,0,0,0.25);}
.button:first-child {border-radius: 10px 0 0 10px;}
.button:last-child {border-radius: 0 10px 10px 0;}
.label {
 text-shadow: 0 1px 1px #729fcf, 0 -1px 1px #3465a4;
 color: white;
 height: 30px;
 padding: 8px;
 -moz-user-select: none;
 -webkit-user-select: none;
 display: inline-block;
 padding-left: 25px;
}
.button:hover .label {text-shadow: 0 -1px 1px #729fcf, 0 1px 1px #3465a4;}
.button:first-child .label {padding-left: 15px;}
.button:last-child .label {padding-right: 15px;}
.button:last-child .arrow {display: none;}
.arrow {width: 17px;height: 30px;display: inline-block;vertical-align: top;overflow: hidden;margin-left: -5px;}
.arrow span {
 border-radius: 5px;
 width: 24px;height: 24px;
 display: inline-block;
 -moz-transform: rotate(45deg);
 -webkit-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 margin-left: -13px;
 margin-top: 3px;
 box-shadow: inset 1px 1px 0px rgba(255,255,255,0.25), 1px -1px 2px rgba(0,0,0,0.25);
 background-color: #729fcf;
 background: -moz-linear-gradient(135deg, #3465a4, #729fcf);
 background: -o-linear-gradient(135deg, #3465a4, #729fcf);
 background: -webkit-gradient(linear, right bottom, left top, from(#3465a4), to(#729fcf));
}
.button:hover .arrow span {
 background-color: #3465a4;
 background: -moz-linear-gradient(135deg, #729fcf, #3465a4);
 background: -o-linear-gradient(135deg, #729fcf, #3465a4);
 background: -webkit-gradient(linear, left top, right bottom, from(#3465a4), to(#729fcf));
 box-shadow: -1px 1px 2px rgba(255,255,255,0.25), inset -1px 1px 1px rgba(0,0,0,0.25);
}