Как сверстать такой треугольник?

Question

[Wispik]

Есть лендинг и внизу каждый блок заканчивается таким вот треугольником

Если бы фон был одноцветный и не надо было делать закругления, то я понимаю, как это делается через border.
А как в данном случае поступить, не знаю.
Есть мысль, что это как-то через clip-path и svg можно сделать.
Хотя бы подкиньте идею пожалуйста, как это можно реализовать

Answer 1

[profesor08]

Кривая Безье - это именно то, что тебе на самом деле надо для того, чтоб решить свою задачу.

clip-path - это то, что позволит использовать тебе Кривые Безье для стилизации своего элемента.

Тем, кто не хочет развиваться сюда

Comments

[Wispik]

Спасибо, последняя ссылочка помогла

Answer 2

[Lord_Dantes]

Найти clip-path и попробовать обрезать блок сверху. Если получилось, накидаем через filter CSS свойство тени и будет все ок. Главное найти path нужный )

Comments

[Wispik]

Да вот замучался с этим clip-path) Всякие онлайн генераторы перепробовал, обычный треугольник вырезается, а вот как углы скруглить у него я так и не понял.