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

Question

[Кирилл]

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

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

html {
    background: #fff
}

Но как задать с помощью CSS изображение перевёрнутого треугольника? Ставить его как изображение не вариант. Есть ли возможность с помощью CSS задать треугольник правилами стилей? Заранее спасибо.

Answer 1

[Максим Тимофеев]

Ставить его как изображение не вариант

Почему? png или svg будет крайне маленьким. Это отличный вариант.

Comments

[Кирилл]

Хотя если в SVG, то вполне оптимально. Макет в PSD, а треугольник нарисован как примитив. Его можно экспортировать в SVG. Попробую SVG в качестве бэкграунда поставить. Спасибо за наводящую мысль :)

[Максим Тимофеев]

Кирилл, закодируйте в base64 и вставьте прямо в css или даже без base64

body {background: #fff url('data:image/svg+xml;utf8,<svg ...> ... </svg>') center center no-repeat;}

Будет еще на 1 запрос к серверу меньше

[Кирилл]

Максим Тимофеев, да, так и сделал, но не в base64 закодировал, а как тут написано.

Answer 2

[Stalker_RED]

Псевдоэлемент в виде треугольника, и z-index: -1
Но фон body должен быть прозрачным, иначе не видно будет, что там под ним.
https://jsfiddle.net/dhy1xdcx/

Answer 3

[SagePtr]

Можно градиентами задать: https://codepen.io/SagePtr/pen/rdgeNP?editors=0100
(на примере градиенты от жёлтого к красному для наглядности, но вполне можно заменить от белого к белом, и фон станет однородным, но с дыркой посередине в виде треугольника)