仅倾斜元素的右侧答案

【问题标题】：Skew only right side of element仅倾斜元素的右侧
【发布时间】：2017-06-20 11:12:20
【问题描述】：

我需要做这样的事情

现在我看起来像这样，顺便说一句，我正在使用 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>

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

【问题讨论】：

标签： html css twitter-bootstrap-3 skew

【解决方案1】：

您可以在 first 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>

【讨论】：