CSS：使最后一个菜单项边框倾斜[重复]答案

【问题标题】：CSS: Make last menu item border slanted [duplicate]CSS：使最后一个菜单项边框倾斜[重复]
【发布时间】：2018-06-18 12:55:35
【问题描述】：

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

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/

【问题讨论】：

标签： javascript html css css-transforms

【解决方案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 上的 skew 效果。

【讨论】：

首先提出了另一个答案，但遇到了问题，在 cmets 中提到，这个解决方案 <span> 解决了它。所以选择这个作为更正确的解决方案。还必须添加translateZ(1px)，因为我遇到了像这里stackoverflow.com/questions/21004108/…这样的问题

【解决方案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>

【讨论】：

这行得通，但我遇到了新问题，如果你在带有背景色的项目上添加悬停效果，它会将倾斜的边框重叠到另一个项目中。