Как сверстать этот элемент?

Question

[Qurel]

В макете есть белая скошенная линия, начинающаяся с начала контейнера и до конца ширины экрана браузера.
Как лучше сверстать?

Comments

[Rustam Bainazarov]

Абсолютное позиционирование. Ширина 100vw.

[Qurel]

Рустам Байназаров, так и сделала:

&::after
content: ''
 position: absolute
 z-index: 0
left: 20px
bottom: 0
width: 100vw
height: 43px
background-color: #e8e6e4
transform: skewX(-45deg)

А хедеру задала overflow: hidden, чтобы убрать горизонтальный скролл

Answer 1

[Капитан Какао]

Вот так - смотреть демо

Answer 2

[RAX7]

Comments

[dom1n1k]

Если на странице есть вертикальная прокрутка, ваше решение добавит к ней ещё и горизонтальную.

[RAX7]

dom1n1k, в таком виде - да, если добавить overflow-x: hidden для body, то проблема исчезнет. Но тогда и использовать calc станет бессмысленно, можно использовать просто 100vw