Как наклонить элемент, но сохранить текст в нормальном состоянии (без перекоса)

Question

Можно ли воспроизвести это изображение, используя только CSS?

Я хочу применить это к моему меню, поэтому коричневый фон появляется на hover пример

Я не знаю, как это сделать, у меня есть только;

.menu li a:hover{
     display:block;
     background:#1a0000;
     padding:6px 4px;
}

Answer 1

skew родительский элемент (LI) и обратный перекос дочерних элементов

nav li {
  display:inline-block;
  transition: background 0.2s;
  transform: skew(20deg);  /* SKEW */
}
nav li a {
  display:block;
  text-decoration:none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* INVERSE SKEW */
  color: #0bf;
}
nav li.active,
nav li:hover{
  background:#000;
}

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Answer 2

Вот скрипка для использования в разных браузерах - я создал за пару минут.

Попробуйте поиграть с аргументами, я использовал :before а также :after сделать это.

https://jsfiddle.net/DTBAE/

Answer 3

Вы можете использовать transform: skew(X, Y) свойство для достижения этого. Создайте наклонный внешний контейнер, затем наклоните противоположное количество на внутреннем контейнере, чтобы вернуть текст обратно к прямому. Посмотрите эту скрипку, например;

http://jsfiddle.net/UZ6HL/4/

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

Answer 4

.skew {
  background: green;
  color: #fff;
  padding: 50px;
  transform: skewX(-7deg);
  font-size: 20px;
  font-weight: 700;
}

.skew p {
  transform: skewX(7deg);
}

<div class="skew">
  <p>This is caption</p>
</div>

Вот пример

Answer 5

Для поддержки IE просто добавьте -ms-transform: skew(20deg, 0deg); кроме всего прочего transform: skew(20deg, 0deg);s.

Answer 6

Вы можете использовать clip-pathчтобы добиться таких результатов. Например:

Здесь вы можете создать свой клип и использовать его в своем коде.

Вот рабочая скрипка для справки

Answer 7

ПРИМЕЧАНИЕ. SPAN НЕ зависит от функциональности преобразования CSS, поэтому вам потребуется DIV или изменение диапазона для отображения: блок; в противном случае они НЕ будут затронуты.

Так что просто поместите ТЕКСТ в отдельный div и выровняйте его.

пример обертки div:

       transform: skewx(35deg)

но текстовый div:

      transform: skewx(-35deg); 

вот кодепен: https://codepen.io/dmitrisan/pen/NWaYEzV