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>