Tabs border with triangle with CSS

by Kheema Pandey

HTML

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
</ul>

CSS

html, body{
    background:#E5E2E2;
}

ul{
    display:inline-block;
    list-style-type:none;
    border:1px solid #CCCCCC;
    padding:0;
}

li{
    float:left;
    padding:10px 15px;
    background:#F4F4F4;
    position:relative;
}

li:nth-child(n+2):before{
    content:'';
    position:absolute;
    left:-5px;
    top:-1px;
    width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 10px solid #e5e2e2;
}

li:nth-child(n+2):after{
    content:'';
    position:absolute;
    left:-5px;
    bottom:-1px;
    width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-bottom: 10px solid #e5e2e2;
}