profesor08

Картинка, canvas, svg. Но если ты надеешься на какое-то решение при помощи css, то можешь посмотреть в сторону clip. Естественно будет работать только в самых новых браузерах и то не во всех. Поэтому твой вариант - картинка.

Если ты не можешь на это повлиять, то смирись. На самом деле, то что ты описал, и как ты это описал, должно делаться еще на уровне самого SQL запроса, и возвращаться должны готовые для употребления данные. Вот эти все сравнения идентификаторов должна делать субд на основе пришедшего к ней SQL запроса. А тебе должно быть достаточно сделать запрос вроде getMenu(params), где params это и локализация, и прочие нужные поля.

А так выходит что бэкенд это файл базы данных, а роль субд выполняет фронтенд.

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

createWall() {
minHeight = 10;
maxHeight = 30;
minWidth = 20;
maxWidth = 40;

width = Random.value * (maxWidth - minWidth) + minWidth;
height = Random.value * (maxHeight - minHeight) + minHeight;

// code to place wall
}

minDistanceBetweenWalls = 100;
distance = 0;

ticker() {
  distance++;

  if (distance > minDistanceBetweenWalls) {
    // some chance to place wall
    if (Random.value > .9) {
      createWall();
      distance = 0;
    }
  }
}

Ну не знаю что тут сложного. Картинку оставить как есть, убрать ее атрибуты высоты и ширины. Добавить еще один блок и растянуть его на всю ширину. И в него можно пихать все что угодно.

https://jsfiddle.net/profesor08/bwLaqyza/