@belyaevcyrill

Как сделать фон у web-страницы в виде треугольника?

Есть PSD-макет лендинга, у которого почти весь фон однородного цвета. Допустим #fff цвета.
Но где-то в середине этого макета в фоне есть геометрическая фигура в виде широкого перевёрнутого треугольника. Причём основание треугольника направлено к шапке сайта, а вершина к футеру сайта.

Простой фон у лендинга изобразить можно просто. Вот так:
html {
    background: #fff
}


Но как задать с помощью CSS изображение перевёрнутого треугольника? Ставить его как изображение не вариант. Есть ли возможность с помощью CSS задать треугольник правилами стилей? Заранее спасибо.
  • Вопрос задан
  • 271 просмотр
Пригласить эксперта
Ответы на вопрос 3
webinar
@webinar Куратор тега Веб-разработка
Учим yii: https://youtu.be/-WRMlGHLgRg
Ставить его как изображение не вариант

Почему? png или svg будет крайне маленьким. Это отличный вариант.
Ответ написан
Stalker_RED
@Stalker_RED
Псевдоэлемент в виде треугольника, и z-index: -1
Но фон body должен быть прозрачным, иначе не видно будет, что там под ним.
https://jsfiddle.net/dhy1xdcx/
Ответ написан
Комментировать
SagePtr
@SagePtr
Еда - это святое
Можно градиентами задать: https://codepen.io/SagePtr/pen/rdgeNP?editors=0100
(на примере градиенты от жёлтого к красному для наглядности, но вполне можно заменить от белого к белом, и фон станет однородным, но с дыркой посередине в виде треугольника)
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы