CSS: 使最后一个菜单项边框倾斜

Question

我有一个带有白色边框的简单菜单列表，默认情况下所有边框必须是直的，最后一个边框必须是倾斜的。

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}
li:first-child {
  border: none;
}

这是当前的：

目标：

边框很简单border-left: 1px solid #FFF;。

https://jsfiddle.net/u41wo2vc/3/

Answer 1

刚好可以skew()而已：

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}

li:first-child {
  border: none;
}

li:last-child {
  transform: skew(-15deg);
}

li:last-child span {
  display: inline-block; /* or "block" */
  transform: skew(15deg);
}

<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li><span>Item</span></li>
  </ul>
</div>

当然，您需要使用额外的 wrapper 来消除 content[=26] 上的 skew 效果=].

Answer 2

你可以在最后一个 <li> 上使用伪元素并倾斜它

ul {
  background-color: #183650;
}

li {
  list-style: none;
  display: inline-block;
  border-left: 1px solid #FFF;
  color: #FFF;
  text-transform: uppercase;
  padding: 5px 10px;
  font-size: 12px;
  text-align: center;
}

li:first-child {
  border: none;
}

li:last-child {
  position: relative;
  border: none;
}

li:last-child::before {
  content: '';
  display: inline-block;
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;
  height: 100%;
  background: #fff;
  transform: skew(-20deg);
}

<div class="menu">
  <ul>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
    <li>Item</li>
  </ul>
</div>

CSS: 使最后一个菜单项边框倾斜

CSS: Make last menu item border slanted

html

javascript

css

css-transforms