Как создать топографический css стиль?

Question

[Lord]

Как создать css стиль для фона сайта, который выглядит как топографическая карта?

Вот пример:



P.S. Мне не нужно просто вставлять фото на фон.

Comments

[Александр Васильев]

Хз как такое на css.
Может вставить слой карты через api?
Или svg кодом, но оно будет весить прилично.
Или смотреть куда-то туда

[DIVSIDE]

Никак

[Максим]

В html, css всё квадратное или прямоугольное....
На html css это ни сделать...

[Daemon23RUS]

Максим,

В html, css всё квадратное или прямоугольное....
На html css это ни сделать...

разработчики css с Вами не согласны

.element_nth {
  border-top-left-radius: 72% 65%;
  border-top-right-radius: 32% 44%;
  border-bottom-right-radius: 25% 47%;
  border-bottom-left-radius: 69% 35%;
}

Это не в пику Вам, если сильно упоротся + религия не позволяет SVG то нет предела человеческого извращения на HTML

[Максим]

Daemon23RUS, демонстрацию ещё бы сделали этого творчества

Answer 1

[Daemon23RUS]

Не думаю, что моя идея, описанная ниже - лучший вариант, я бы использовал SVG формат изображения. Но в рамках вопроса на css без использования изображений - куча дивов с бордером и уникальным стилем для каждого. Идею наверное можно развить до приемлемого варианта использования

.element_nth {
  border-top-left-radius: 72% 65%;
  border-top-right-radius: 32% 44%;
  border-bottom-right-radius: 25% 47%;
  border-bottom-left-radius: 69% 35%;
}

Comments

[Lord]

Я видел что человек использовал через svg, расскажи подробнее

[Daemon23RUS]

Lord,

P.S. Мне не нужно просто вставлять фото на фон.

SVG - как раз будет тем самым фото.

расскажи подробнее

Берете рисунок топографии в формате SVG и можно его запихнуть в CSS вставив содержимое SVG

background-image: url("data:image/svg+xml,***<place encoded svg>***");

не забыв закодировать его в URL encoded

Answer 2

[Сергей delphinpro]

на css такого точно не сделать

1. Рисовать на фоновом canvas

2. Отрисовать бесшовную текстуру в svg и поставить на фон.

Comments

[Daemon23RUS]

тут скорее вопрос терминологии

background-image: url("data:image/svg+xml,***<place encoded svg>***");

такой подход считается на чистом CSS или нет ?