CSS Triangle Tabs

Triangular tabs using a pseudo element and no additional markup

HTML

<div></div>

CSS

div:after {
    content:'';
    border:20px solid #fff;
    border-bottom-color:transparent;
    border-left-color:transparent;
    width:0; height:0;
    display:block;
    position:absolute;
    top:0;
    right:0;
}

div:before {
    content:'';
    position:absolute;
    top:2px;
    right:2px;
    line-height:20px;
    display:block;
    width:20px;
    text-align:center;
    z-index:10;
}


div {
    background:#ccc;
    display:block;
    width:20%;
    height:100px;
    float:left;
    border:1px solid #fff;
    position:relative;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}

body {
    padding:0; margin:0;
    color: #92b4f2;
    font-family:arial, sans-serif;    
}