Skew only right side of element

Question

I need to make something like this

For now i have made to look like this, btw i am using bootstrap 3.

This is my code for now

 /* nav stuff */ ul, li, a { display: inline-block; text-align: center; } /* appearance styling */ ul { /* hacks to make one side slant only */ overflow: hidden; } li { background-color: $white; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); } li a { padding: 3px 15px 3px 10px; text-decoration: none; transform: skewX(20deg); -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <ul class="breadcrumb"> <li><a href="">Home</a></li> <li><a href="#">Products</a></li> </ul> 

Only problem i have for now on first element :(

Answer 1

You could use pseudo selector :before on first li and style that,

 /* nav stuff */ ul, li, a { display: inline-block; text-align: center; } /* appearance styling */ ul { /* hacks to make one side slant only */ overflow: hidden; } li { background-color: black; transform: skewX(-20deg); -ms-transform: skewX(-20deg); -webkit-transform: skewX(-20deg); } li:nth-child(1):before { content: ""; position: absolute; width: 10px; height: 100%; background: black; -webkit-transform: skewX(20deg); left: -5px; } li a { padding: 3px 15px 3px 10px; text-decoration: none; transform: skewX(20deg); -ms-transform: skewX(20deg); -webkit-transform: skewX(20deg); color:white; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <ul class="breadcrumb"> <li><a href="">Home</a></li> <li><a href="#">Products</a></li> </ul>