Как сделать наклонный край у блока?

Question

[art style]

не получается сделать такой эффект путем добавления псевдоэлемента :after
прозрачность накладывается друг на друга и цвет изменяется. какие еще варианты решения есть?
с clip-path не могу выставить точный градус края при адаптации
так же не могу с :after и clip-path сделать точное позиционирование :after если указывать ширину блоков в %

Answer 1

[Виталий Першин]

Чтобы при помощи clip-path зафиксировать угол, используйте calc:

Comments

[art style]

я дико извиняюсь а как это сделать адаптивным?

[art style]

clip-path: polygon(calc(5% - 36px) 0%, 100% 0%, 100% 100%, 0% 100%);

может я что-то не так делаю, но нет адаптивности

[art style]

clip-path: polygon(calc(0% + 33px) 0%, 100% 0%, 100% 100%, 0% 100%);

получилось

[Виталий Першин]

art style, Обновил ответ. Во всех направлениях есть 2 значения 0 и 100%, если вы хотите сдвинуть на 25 пикселей от 0 то так и пишите 25px а если от 100 то отнимите от 100 25 пикселей calc(100% - 25px)

Answer 2

[Тарас Шульга]

https://codepen.io/angryyum/pen/povBzEQ Вот как вариант. Первое, что пришло на сонную голову.

Comments

[art style]

не.... не подходит.. смысл в том это фон менюшки с высотой 80 и position:absolute
за ней будет фон-слайд... поэтому нужна прозрачность и четкая постановка краев. при этом адаптивность

Answer 3

[Олег]

Попробуй градиент обычный