Как сделать такие штуки?

Question

[verstak4444]

всем привет!подскажите,как сделать диагональные блоки как на 1м скрине?
и как сделать кнопочку видео,чтоб например нажимаешь на нее выскакивало видео к примеру с ютуба?

Answer 1

[Станислав Дементьев]

Диагональные блоки можно сделать или промежуточной секцией, в которую ты фоном накладываешь именно этот переход. То есть режешь макет так, чтобы было 2 ровных блока и посередине с переходом. Если к примеру фото типа обрезается, а дальше блок просто с цветом, то можно сделать так:

А кнопка с появление видео - это скрипт нужно делать. Поищи готовые решения кода.
Тут вопрос как оно должно выскакивать?
В новой вкладке? - тогда обычная кнопка с ссылкой на ютуб.
В окне на сайте - тогда погугли "модальное окно" а в него уже вставь видео.

Answer 2

[Ankhena]

1. Вариантов много, выбор зависит от содержимого и его поведения. Это может быть фон градиентами, псевдоэлементы, трансформации...
https://css-tricks.com/examples/ShapesOfCSS/

2. гуглить "появление блока при клике". Начните делать по любой из инструкций, потом приходите с конкретными вопросами.

Comments

[verstak4444]

да я пока ток учусь пробую как раз эти фишки

[Ankhena]

verstak4444: Тогда, вот еще по градиентам приличное руководство https://html5book.ru/css3-gradient/

[verstak4444]

Ankhena W: а границу можно прилепить к градиенту?тобиш border

[Ankhena]

verstak4444: так еще один цвет добавить