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

Question

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

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

enter image description here

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

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

.menu li a:hover{

     display:block;

     background:#1a0000;

     padding:6px 4px;

}

665 5

css css3 css-shapes

5 ответов:

Comments

Ничего не найдено.

Roko C. Buljan · Accepted Answer · 2017-09-28 19:23:35

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

CSS Menu skewed buttons diagonal borders

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>

udidu · Accepted Answer · 2017-11-01 19:09:19

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

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

https://jsfiddle.net/DTBAE/

Don · Accepted Answer · 2017-11-01 18:45:53

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

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

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

Thabet Jmal · Accepted Answer · 2017-11-01 19:33:06

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

lurk · Accepted Answer · 2017-06-23 11:27:42

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

здесь пример