Сглаживание, создающее странный пробел в искаженной навигации

#html #css

#HTML #css

Вопрос:

У меня проблема с созданием искаженной навигации, на самом деле все хорошо, кроме странного разрыва между ссылками на элементы навигации. Я провел небольшое исследование и увидел, что это из-за техники сглаживания.

Я пытался взломать его с помощью селектора ::before и / или с применением атрибута border-right к блоку, но безуспешно.

Есть код:

 * {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #1d1e22;
  overflow: hidden;
}

ul {
  margin-left: 5%;
  position: relative;
}

ul li {
  float: left;
  list-style: none;
}

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: #444857;
  transform: skew(-20deg);
  transition: all 300ms ease-in-out;
}

ul li a:hover {
  background: #fff;
  color: #000;
}

ul li a span {
  transform: skew(20deg);
  display: block;
}

 <header>
   <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>  
</header>

Я хочу, чтобы он был без черного разрыва, только в одном тоне. Если вы знаете, как это исправить, я буду признателен, если вы поделитесь им.

Ответ №1:

Проблема здесь в том, как браузеры обрабатывают субпиксельный рендеринг. При преобразовании фигуры браузер применяет некоторое сглаживание по краям фигур для более плавного рендеринга.

Из-за этого нет гарантии, что края двух элементов будут идеально выровнены. Посмотрите интересную статью об этом.

Самое быстрое решение — применить некоторое отрицательное поле, чтобы фигуры перекрывались.

 * {
  margin: 0;
  padding: 0;
}

header {
  width: 100%;
  background: #1d1e22;
  overflow: hidden;
}

ul {
  margin-left: 5%;
  position: relative;
}

ul li {
  float: left;
  list-style: none;
  margin-left: -2px;
}

ul li a {
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #fff;
  background: #444857;
  transform: skew(-20deg);
  transition: all 300ms ease-in-out;
}

ul li a:hover {
  background: #fff;
  color: #000;
}

ul li a span {
  transform: skew(20deg);
  display: block;
}

 <header>
   <ul>
    <li><a href="#"><span>Home</span></a></li>
    <li><a href="#"><span>About us</span></a></li>
    <li><a href="#"><span>Services</span></a></li>
    <li><a href="#"><span>Contact</span></a></li>
  </ul>  
</header>

Ответ №2:

Я добавил a box-shadow: 1px 0 1px #444857 к <a> тегам; https://codepen.io/nosnetrom/pen/QPaMBQ

1. Ответы только на ссылки недостаточно хороши. Ответ должен содержать код внутри, иначе, когда этот связанный ресурс умирает, значение этого ответа также уменьшается.

2. Я использую Mozilla Quantum, и никакого эффекта нет.