Как сверстать такой блок?

Question

[FlapJalc]

Всем доброй ночи. Вообще нет сил и идей как можно реализовать такой блок. Может кто уже делал подобное, поделитесь решением. svg нет, через clip тоже сделать не получилось.

Comments

[Ankhena]

Генератор треугольников с границами www.cssarrowplease.com

Answer 1

[Aetae]

Если без SVG то примерно так можно:

Answer 2

[MagicMight]

https://codepen.io/MagicMight/pen/vYOBdXb
Что-то накидал на скорую руку. Думаю, можно от этого отталкиваться

Comments

[MagicMight]

хотя не, тут 90 градусов прибито

[FlapJalc]

MagicMight, Спасибо. Да, здесь и заголовок через content выведен, что мне не подходит.

[MagicMight]

FlapJalc, разделение фоновой картинкой, я полагаю, не подходит под решение?

[FlapJalc]

MagicMight, можно было бы, но блок адаптивный будет. Как эту картинку тянуть даже не знаю. Было бы svg, можно было что - нибудь да придумать.

[MagicMight]

FlapJalc, https://vectr.com/
Такой SVG можно без навыков графики нарисовать тут за несколько минут
Использовать залитую фигуру для фона, а белую границу нарисовать пером

[Владимир Кашутин]

FlapJalc, хорошее решение, используй div вместо before. В чем проблема?