breadcrumbs

by bman654

HTML

<div class="window">
<div class="list">
<div>About This</div><div>This &amp; That</div><div>Locations</div><div>Masks</div><div>Build Output</div>
</div>

CSS

div { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }


div.window
{
    height: 600px;
    padding-top: 10px;
    background-color: black;
}

div.list
{
    overflow: hidden;
    background-color: #222;
    color: #fff;
}

div.list>div
{
    line-height: 41px;
    height: 1cm;                    
    display: inline-block;
    cursor: pointer;
    text-align: center;
    padding-right: 10px;
    padding-left: 30.5px; /* calculated from 41px height: HEIGHT/2 + 10 */
   
    /* The 14.5px is calculated from 41px height: sqrt((HEIGHT/2)^2 * 2) / 2 */
    /* The 16.5px is calculated by adding 2px to 14.5px (for a 2px wide gap between the buttons) */
    /* The 3rd gradient is to fill in the center line when HEIGHT is odd.  The 20px and 21px are the integers surrounding HEIGHT/2 */
    background: #c00; /* fallback */
    background:
        -moz-linear-gradient(135deg, #c00, #c00 14.5px, transparent 14.5px, transparent 16.5px, #c00 16.5px, #c00),
        -moz-linear-gradient(225deg, #c00, #c00 14.5px, transparent 14.5px, transparent 16.5px, #c00 16.5px, #c00);
        -moz-linear-gradient(transparent, transparent 20px, #c00 20px, #c00 21px, transparent 21px, transparent);
    background:
        -webkit-linear-gradient(45deg, #c00, #c00 14.5px, transparent 14.5px, transparent 16.5px, #c00 16.5px, #c00),
        -webkit-linear-gradient(-45deg, #c00, #c00 14.5px, transparent 14.5px, transparent 16.5px, #c00 16.5px, #c00);
    
    /* the -3px is calculated: -1 * (GAP BETWEEN BUTTONS + 1) */
    background-position: top left, bottom left, left center;
    /* The 20.5px is calculated: HEIGHT/2 */
    background-size: 100% 20.5px, 100% 20.5px, 100% 100%;
    background-repeat: no-repeat;
}
div.list>div.x:last-child
{
    padding-right: 10px;
    background: #c00; /* fallback */
    background-size: auto;
    background-repeat: auto;
    background-position: auto;
-webkit-border-top-right-radius:...