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

Question

[Alan Solid]

Хочу узнать как по правильному будет сверстать такие блоки. 1 - это карта, при наведении на область которой она будет загораться, возможно есть примеры таких карт?
2. Это блоки с "Линиями"? Насколько понимаю это через псевдоклассы, а бэкграунд через абсолют. Но прав ли я? Можете сказать точно, чтобы я удостоверился
1.

2.

Answer 1

[Олег]

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

Comments

[Alan Solid]

А можете подсказать как такие линии по углам блоков сделать? Примерный css?

[Олег]

HTML
<div class="corners"></div>
CSS

.corners{
  display:block;
  width: 200px;
  height: 200px;
  background-color: red;
}
.corners::after {
    content: "";
    width: 28px;
    height: 28px;
    position: absolute;
    border-bottom: 2px solid black;
    border-right: 2px solid black;
    right: -18px;
    bottom: -18px;
    display: block;
 }

Длину линий регулируем через width/height
Толщину в border-top/left и т.д.
Положение через left/right/top/bottom
Аналогично циферки те жирные на фоне можно свойством content сделать.

https://jsfiddle.net/Lcpvxtf5/1/

Адаптивность ко всему этому уже через @media запросы под разные размеры экранов делать