Как сделать графику для сайта?

Question

[mipfikus]

Должно получится так:


Больше интересует создание верхней части.
Вариант "сделать картинку и вставить" не подходит.

ВОПРОС

Как сделать графику как на картинке с помошью HTML + CSS или любого другого метода (кроме картинки)?

Если есть возможность сделать тоже-самое на elementor / elementor pro, тоже принимается.

Comments

[Орхан Гасанлы]

Здравствуйте!
Этот вопрос касается больше верстки, нежели WordPress.
А реализовать подобное можно например, при помощи отрисовки в svg. Или например, используя возможности Canvas.
В плане визуальных редакторов Elementor и др., то стоит поискать готовые плагины - дополнения, которые расширяют функционал этих редакторов.

Answer 1

[diqueff]

Где С НАМИ ВЫГОДНО можно сделать рамку: (border: 2px solid red;)
С тремя ответвлениями попробуй сделать таблицу 2x1 и убери рамку снизу

Comments

[mipfikus]

Интересное решение, но я в css как хлебушек. Можете объяснить как сделать таблицу и убрать ей рамку снизу?

[diqueff]

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

table{
width: 300px;
height: 10px;
border-bottom: none;
}

[mipfikus]

Жека Ржека, браво!

Answer 2

[Pavstyuk]

Заголовок в рамке с псевдо элементами before after - это слева и справа ответвления. По центру черточку вниз тоже можно сделать, в качестве элемента c position: absolute внутри заголовка с position: relative

Comments

[Дима Долготер]

тут можно сделать полоски не от верхнего блока вниз, а наоборот с верхних блоков вверх. можно будет адаптировать легче(на первый взгляд так кажется))))