Как сверстать такой заголовок?

Question

[AlexGlinskiy]

Всем привет!
Есть примерно такой макет

Как сверстать этот заголовок, чтобы синий фон был вплотную к краю окна?

Comments

[Даниил Маслов]

как пытались реализовать?

[Ankhena]

Например, градиентом https://jsfiddle.net/m0g8dtv6/
Или трансформацией и обратной трансформацией.
Или блок + треугольный псевдоэлемент (бордером, градиентом).
Или еще чем-нибудь.

Answer 1

[Сергей delphinpro]

Учитывая тот факт, что фон уходит влево, а значит не создаст горизонтальной полосы прокрутки, можно сделать довольно просто:

.heading {
  position: relative;
  …
  &::before {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 100vw; /* или 99999px; */
    background: rgba(blue, 0.5);
    z-index: -1;
    transform: skewX(30deg);
  }
}