2

Как выровнять текст в div, чтобы он не был наклоненный (без задания элементу p cвойства tranform:skew)? Пытаюсь назначить transform: none; или transform: unset; не помогает.

div
{
  transform:skew(40deg);
  width: 50%;
  background: yellow;
  text-align:center;

}
<div><p>Некоторый текст</p><div>

2
  • 1
    Никак. Вам не просто на ноль сбросить нужно, а трансформировать в обратную сторону.
    – user271410
    14 ноя 2017 в 7:50
  • Иногда такие вопросы встретишь... Блин, дело не мое, но вот объясни на кой надо выровнять текст что бы не задавать "р" tranform:skew... ну если это так надо, то возьми в обертку засунь и "p" и "div", что бы были параллельны и транформируй только div///
    – Air
    14 ноя 2017 в 8:40

2 ответа 2

6

Пример

div {
  position: relative;
  width: 50%;
  text-align: center;
}

div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: yellow;
  transform: skew(40deg);
  z-index: -1;
}
<div>
  <p>Некоторый текст</p>
</div>

Вариант с clip-path

Поддержка браузерами clip-path - caniuse.com

Для IE можно использовать clip-path polyfill

div {
  position: relative;
  width: 50%;
  text-align: center;
  background: yellow;
  -webkit-clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
  clip-path: polygon(0 0, 95% 0, 100% 100%, 5% 100%);
}
<div>
  <p>Некоторый текст</p>
</div>

0
-2

    div
    {
      transform:skew(40deg);
      width: 50%;
      background: yellow;
      text-align:center;

    }
    
    div p{
    transform: skew(-40deg);
    }
<div><p>Текст</p></div>

2
  • Вы задание читаете вообще?
    – user271410
    14 ноя 2017 в 7:50
  • 2
    А чем Ваш ответ отличает от неправильного ответа выше? 14 ноя 2017 в 7:57

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.