/** by Gcyrillus
 * bread-crumbs, where you are and what next
 */
html  {
background: #f06;
background: linear-gradient(45deg, #f06, yellow);
min-height: 100%;
}
ul {background:rgba(0,0,0,0.1);list-style-type:none;font-variant:small-caps;font-size:1.5em;color:white;
text-shadow:0 1px 2px black;}
ul li {display:inline-block;padding:2px 1em 2px 1.5em;background:#789;border:dashed 1px;
box-shadow:0 0 0 2px #789, 3px 3px 3px  black;
;border-right:0;
position:relative;}

ul li:after {
content:'';
position:absolute;
transform:rotate(52deg) skew(0,-15deg);
z-index:1;
box-shadow:0 1px 0 2px #789, 3px -1px  2px  black;
right:-0.75em;
height:1.2em;
width:1.2em;
background:#789;
display:inline-block;
border-right:dashed 1px;
border-top: dashed 1px;
}
ul li + li {left:-9999px;}
li:focus {left:0;}
li:focus + li {left:0px;}