只倾斜元素的右侧

Question

我需要制作类似于这样的东西：

目前我已经做出了下面这个，顺便说一下，我正在使用 Bootstrap 3。

这是我的代码：

/* 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>

现在我遇到的唯一问题是第一个元素 :(

- Miomir Dancevic

Answer 1

您可以在第一个 li 上使用伪选择器 :before 并进行样式设置。

/* 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>

- frnt