Alan Solid

1.Это делается через SVG разметку. (Статья на Хабре)
А пример - карта аэропорта Шереметьево https://www.svo.aero/ru/map
2. Можно сделать CSS-псевдоэлементами ::before ::after (с border-top/border-left и указанием ширины/высоты) - тогда будут жёстко привязаны к порождающему их объекту. Блоки с цифрами тоже через CSS-свойство content:"ваш текст";

Пример

const accordions = document.querySelectorAll('.accordion__card');

for (const accordion of accordions) {
  const title = accordion.querySelector('.accordion__card__title');
  const text = accordion.querySelector('.accordion__card__text');

  title.addEventListener('click', () => {
    if (text.classList.contains('accordion__card__text--active')) {
      text.classList.remove('accordion__card__text--active');
    } else {
      for (const accordion of accordions) {
        const text = accordion.querySelector('.accordion__card__text');

        text.classList.remove('accordion__card__text--active');
      }

      text.classList.add('accordion__card__text--active');
    }
  });
}

Ту часть, на которую пользователь нажимать должен лучше сделать кнопкой. А еще вот это можете почитать.

У первого варианта не поддерживается ie, у второго реализация посложнее немного, но поддержка на много лучше.