Создавайте линии, соединяющие объекты, с помощью CSS ⇐ CSS

[Anonymous]

Как создать разделительную ссылку между изображениями, используя CSS?

Желаемый результат:





Фактический результат:



Результат не похож на картинку, и я не могу соединить объекты так, как задумано.

Я пробовал много способов, таких как рендеринг построчно или метод, описанный ниже, рендеринг в сетке. У меня проблемы с созданием линий, соединяющих объекты.

Вот мой HTML/CSS и пример:

.digram-top, .digram-bottom { дисплей: гибкий; оправдание-содержание: пространство между; } .diagram-middle { дисплей: гибкий; оправдание-содержание: центр; } .digram-значение { цвет: var(--Grey, #909090); выравнивание текста: по центру; размер шрифта: 18 пикселей; стиль шрифта: нормальный; вес шрифта: 400; } .digram-текст { цвет: var(--Grey, #909090); выравнивание текста: по центру; размер шрифта: 14 пикселей; стиль шрифта: нормальный; вес шрифта: 300; } .объект { позиция: абсолютная; ширина: 65 пикселей; высота: 100 пикселей; } .image-объект { ширина: 55 пикселей; высота: 55 пикселей; } .grid-контейнер { дисплей: сетка; столбцы-шаблона сетки: авто авто авто; } .grid-item { выравнивание текста: по центру; } .делитель { высота: 100 пикселей; поле: 0 пикселей 0 пикселей; положение: относительное; } .divider::перед, .divider::after { содержание: ''; позиция: абсолютная; высота: расчет (50 % – 0,5 пикселя); ширина: расчет (50 % – 0,5 пикселя); } .divider::before { нижняя граница: 1 пиксель, сплошной #8c8c8c; левая граница: 1 пиксель, сплошной #8c8c8c; граница-нижний-левый радиус: 20 пикселей; верх: 0; 10кВтч Производить

2кВтч Сетевая мощность





1кВтч Батарея

12кВтч Потреблять