CSS: Make last menu item border slanted

Question

I have a simple menu list with white border, all borders must be straight by default and last border must be slanted.

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

This is current:

Goal:

The border is just simple border-left: 1px solid #FFF;.

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

VXp · Accepted Answer · 2018-06-18T18:55:08.287

2

Just can just skew() it:

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>

Of course you need to use an additional wrapper to nullify the skew effect on the content.

edited Jun 18 '18 at 18:55

answered Jun 18 '18 at 13:00

VXp

11,598
6
31
46

1

First went with another answer, but ran into problem, mentioned in comments, and this solution with `` solves it. So picking this as more correct solution. Also had to add `translateZ(1px)` because I ran into problem like here https://stackoverflow.com/questions/21004108/unwanted-outline-on-border-when-parent-is-transformed – user3108268 Jun 18 '18 at 13:40

score 2 · Answer 2 · answered Jun 18 '18 at 13:02

You can use pseudo element on the last <li> and skew it

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>

This works, but I ran into new problem, if you add hover effect on items with background-color, it overlaps the skewed border into another item. — user3108268, Jun 18 '18 at 13:33

CSS: Make last menu item border slanted

2 Answers2