Как наклонить элемент, но оставить текст нормальным (неперекошенным)

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

введите здесь описание изображения

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

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

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

css css-shapes
person Preston    schedule 30.07.2013    source источник

Ответы (5)


arrow_upward
142
arrow_downward

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

CSS меню с перекошенными диагональными границами кнопок

nav ul {
  padding: 0;
  display: flex;
  list-style: none;
}
nav li {
  transition: background 0.3s;
  transform: skew(20deg); /* SKEW */
}

nav li a {
  display: block; /* block or inline-block is needed */
  text-decoration: none;
  padding: 5px 10px;
  font: 30px/1 sans-serif;
  transform: skew(-20deg); /* UNSKEW */
  color: inherit;
}

nav li.active,
nav li:hover {
  background: #000;
  color: #fff;
}
<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li class="active"><a href="#">Products</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

person Roko C. Buljan    schedule 30.07.2013
comment
да... и спасибо за переформулировку моего вопроса.. я не помню этого skew имени.. :) - person Preston; 30.07.2013
comment
это: display:inline-block; не работает IE8 или меньше... поэтому я применил *float:left; хак, чтобы сделать это встроенным в IE. Но когда я навожу курсор на меню (в IE8), я не могу настроить нормальный фон (без перекоса). Какие-нибудь советы? - person Preston; 30.07.2013
comment
@Preston, конечно, используй изображения и помоги нам убить IE8 - person Roko C. Buljan; 30.07.2013
comment
Это работает только в том случае, если у вас есть элемент, вложенный внутрь, я бы хотел просто изменить текст. - person JackHasaKeyboard; 05.11.2016
comment
@JackHasaKeyboard вы не можете; так что оберните свой текст в <span> и сделайте то же самое. - person Roko C. Buljan; 05.11.2016
comment
@ RokoC.Buljan ‹--- что он сказал. Пожалуйста... никто никогда не делал этого на практике... просто оберните его в диапазон и придайте ему те же самые свойства перекоса и, возможно, display: inline-block или что-то в этом роде. - person Eric Hodonsky; 30.06.2020

arrow_upward
10
arrow_downward

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

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

https://jsfiddle.net/DTBAE/

person udidu    schedule 30.07.2013
comment
Есть ли шанс, что вы могли бы объяснить это? Я немного в недоумении от того, что он делает, и хотел бы немного узнать о :before и :after - person Don; 30.07.2013
comment
Я бы тоже выбрал метод преобразования, но он лучше поддерживается браузером! - person thgaskell; 30.07.2013
comment
Хотя это почти Xbrowser (:after, :before), вы можете получить только угол 45°. - person Roko C. Buljan; 30.07.2013
comment
Вы можете настроить ширину границы, чтобы изменить наклон. jsfiddle.net/DTBAE/1 - person thgaskell; 30.07.2013

arrow_upward
6
arrow_downward

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

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

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

person Don    schedule 30.07.2013

arrow_upward
3
arrow_downward 

.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>

Вот пример

person lurk    schedule 23.06.2017

arrow_upward
2
arrow_downward

Чтобы иметь поддержку IE, просто добавьте -ms-transform: skew(20deg, 0deg); рядом со всеми остальными transform: skew(20deg, 0deg);.

person Thabet Jmal    schedule 23.03.2015