Откуда берется пробел между элементом и псевдоэлементом (на планшете/мобилках)?

Question

[alicepepel]

Здравствуйте.
Есть элемент - ярлык со скосом, сделанным псевдоэлементом. На десктопе стоит впритык к элементу, а на планшете появлется маленький зазор. Откуда он и как его устранить? Если сдвинуть на пиксель вправо псевдоэлемент, то, естсественно, на десктопе он заезжает на лишний пиксель внутрь элемента.

Comments

[Евгений Кузовлев]

Скорее всего дело в масштабирование в системе

[dmitrygavrish]

Как альтернативное решение (через transform: skew/skewX):

<div>
    <p>Some not so long text</p>
</div>

div {
  width: 400px;
  height: 50px;
  background-color: orange;
  transform: skewX(-45deg);
}

p {
  text-align: center;
  line-height: 50px;
  font-size: 28px;
  color: #fff;
  transform: skewX(45deg);
}

Answer 1

[Максим Тимофеев]

Рендер не совершенен. Сделайте небольшой наезд. Или юзайте svg для таких элементов.