Страницы

Поиск по вопросам

суббота, 6 октября 2018 г.

Три цвета фона расположенные под углом

Как мне получить фон, похожий на этот образ:

Только 3 цвета, которые идут от верхнего угла, как солнечный луч.
Может быть, лучше использовать простой PNG или SVG для фонового изображения?
Перевод вопроса: Three colors angled background color @Chris


Ответ

Ну такой "кривой" вариант на css с помощью border
.bg { position:absolute; top: 0; left: 0; right: 0; bottom: 0; overflow: hidden; background: #16334a; } .bg:after { content: ''; position: absolute; top: 0; right: 0; border-bottom: 100vh solid #204158; border-left: 70vw solid transparent; } .bg:before { content: ''; position: absolute; right: 0; top: 0; border-top: 70vh solid #0a253e; border-right: 100vw solid transparent; } .inner { position: relative; z-index: 5; color: #ccc; text-transform: uppercase; font-family: Arial; text-align: center; top: 40%; }

Lorem ipsum dolor sit amet, consectetur adipisicing elit. In, impedit.

Комментариев нет:

Отправить комментарий