Как сверстать скошенный блок?

Question

[someserj]

и непонятно что лучше - срезать синий блок или блок с картинкой. Если знаете, подскажите, пожалуйста, оба варианта

Comments

[Михаил Макаров]

Делается через псевдоэлементы ::before и ::after

Answer 1

[Александр Косицын]

Лучше мне кажется как svg вставить. Фигура не сложная, можно path прописать самому. И тянуться хорошо будет

Comments

[someserj]

а можно пример какой-то?

[Александр Косицын]

someserj,
вот пример набросал
https://jsfiddle.net/346109dg/4/

[someserj]

Александр Косицын, а как нарисовать градиент внутри svg? у меня не цельный синий цвет, а background: linear-gradient(180deg, #092E6E 0%, #064B7E 100%);

[Александр Косицын]

someserj, svg поддерживает заполнение градиентом.

[Александр Косицын]

someserj, Вот пример сделал с градиентом
https://jsfiddle.net/346109dg/5/

[someserj]

Александр Косицын, супер, все получилось. а подскажи пожалуйста как теперь модифицировать этот треугольник в трапезоид prntscr.com/hzds6s

[Александр Косицын]

вот так. нужно изменить path
https://jsfiddle.net/346109dg/6/

Answer 2

[Ankhena]

Без дополнительных блоков и псевдоэлементов: https://jsfiddle.net/Ankhena/omuc1b0u/

Comments

[someserj]

классный вариант, но у меня не цельный синий цвет, а градиент.

background: linear-gradient(180deg, #092E6E 0%, #064B7E 100%);

как быть?

[Ankhena]

someserj, тогда придется обрезать картинку clip-path bennettfeely.com/clippy

[someserj]

Ankhena, круто, но даже Edge не поддерживает, не говоря уже об IE11

[Ankhena]

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

Если прям принципиален ИЕ, то без лишних блоков не обойтись.
Например, так https://jsfiddle.net/2zL5xt7q/
Сдвиг блока поставила первое что пришло в голову, посчитайте сколько нужно, возможно надо указывать через calc, если высота изменяемая.

[someserj]

Ankhena, спасибо, пробовал сам сделать так, но не знаю как решить проблему с адаптивностью - а именно translateX(-50px) должно быть плавающим значением

[Ankhena]

someserj, я тоже не знаю как решить вашу проблему с адаптивностью, потому что даже не знаю как себя ведет этот блок при адаптации. Ни макетов ни вашего кода.

Самый простой вариант это абсолютное позиционирование этого блока от центра, а ширину задавать с запасом. Всё равно overflow отрежет лишнее.

Если бы знать на сколько изменяются размеры этого блока, может можно было бы еще что-нибудь придумать.

Answer 3

[Кирилл]

Срезать блок с картинкой - это делать её в png - будет весть несколько мегабайт. Картинку оставляйте прямоугольной в jpg формате, а вообще вопрос легко гуглится
Как сделать скошенный блок с бэкграундом?
www.dejurka.ru/css/angled-edge-css3

Answer 4

[AndrewsN93]

Можно через псевдоэлемент добавить блок, больших размеров по высоте, чем родитель с картинкой, и с помощью absolut позиционировать а потом через css3 transform развернуть на нужный угол, и родителю повесить overflow:hidden что бы не торчал псевдоэлемент. И не забыть про z-index'ы.

Answer 5

[Андрей]

Самый очевидный вариант - задать синему блоку :after - и сверстать его треугольником, абсолютно отпозиционированным справа
Как верстать треугольники

Comments

[someserj]

хороший вариант, но у меня градиент, а не цельный синий цвет. как быть?

[Андрей]

someserj, тогда треугольниками не выйдет, но можно так
https://codepen.io/avkvak/pen/ppVvjx