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()它：

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

当然，您需要使用其他包装来取消内容上的倾斜效果。

Answer 2

您可以在最后<li>上使用伪元素并将其倾斜

＆＃13;

＆＃13;

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);
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;