Ivan Bogachev

Ну строго говоря для решения задачи "на CSS добавить внутри квадрата квадраты меньше и другим цветом" достаточно одного div-элемента (нет нужды добавлять новый элемент на каждый декоративный квадрат).



Но лучше все же уточнить у задавшего вопрос, что значит "не стереть локти" в его понимании.

Очень рекомендую почитать статью про трехмерные презентации товаров на Three.js и разобраться с примером из нее. Там речь в частности идет про загрузку и отображение модели и вращение камеры вокруг нее.

На CSS такое обтекание никак не сделать. Но можно пойти одним весьма хитроподвывернутым способом - продублировать текст и скроллить два блока с контентом одновременно. Как в этом примере, только в одной плоскости, без "перевернутой" трансформации:



Это позволит сделать плавное движение, без рывков при перестроении элементов в DOM-дереве.

Вероятно вам нужно использовать "+":

nav:hover + section
  left: 170px

Давайте посмотрим с разных сторон:

С одной стороны SVG можно нарисовать в графическом редакторе - для замороченных фигур это будет проще, чем пытаться нашаманить их на CSS.

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

С третьей стороны может быть соглашение в компании относительно верстки и в нем этот момент может быть описан (скорее всего в пользу SVG). Тогда ничего не придумываем и действуем в соответствии с ним - постоянство в коде очень важно для его поддержки.

С четвертой стороны могут быть такие элементы, что на CSS их не получится сделать кроссбраузерно (с учетом утвержденного списка браузеров). Тогда SVG - наш выбор.

С пятой стороны могут быть анимации у этих элементов. Там нужно смотреть, но иногда вариант с SVG можно будет анимировать как задумано, а вариант на CSS - нет.

С шестой стороны есть вопрос производительности. Часто для имитации одного элемента в SVG нужен десяток-другой элементов, стилизованных с помощью CSS. А если таких элементов на странице сотни (и они превращаются в тысячи), то это начинает влиять на скорость применения стилей к странице.

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

Без кода сложно говорить, но третий глаз подсказывает, что скорее всего у родительского блока задано свойство transform, filter или will-change. Уберите его и все встанет на свои места.

Вариант, предложенный Максим Ленский не адаптивный и ломается при изменении контента, так что предложу свой.

Треугольники можно было упустить, не в них суть)

Ну ну совсем так. При верстке таких сайтов важно сохранять контекст, в котором был дизайнер (если с ним есть контакт, то лучше все обсудить с ним, но в нашем случае пример в вакууме, так что думаем сами). Конкретные размеры обычно не так важны, как контекст. Здесь его задает равномерная линия между треугольниками и ее важно сохранить. Исходя из этого соображения нужно посчитать, какого размера должны быть треугольники, чтобы все влезало и "было красиво", учитывая, что высоты всех блоков могут меняться. CSS у нас не дает возможности делать вычисления исходя из высоты соседних элементов, так что придется добавить щепотку JS. Ну а дальше - дело техники.



codepen.io/sfi0zy/pen/zYxJNmG.

term does not evaluate to a function taking 2 arguments

a = max(b, c, d);

Стандартная функция max из algorithm не имеет варианта для поиска наибольшего из трех чисел в таком виде. Есть для двух. Если нужно для трех - вам придется написать такую функцию самостоятельно. Ну или загуглите "cpp max of 3 numbers".

У тега script кроме атрибута async есть еще defer. Скрипты с этим атрибутом загружаются все асинхронно, но выполняются потом в том порядке, в котором записаны в html (только они все должны быть отдельными файлами, не инлайновыми скриптами).

Также, если у вас уже есть много скриптов, да еще и месиво из инлайново вставленных и асинхронно подгружаемых, причем все друг от друга зависят и оперативно это не починить, то можно организовать маленькую систему событий, которая будет в себе хранить информацию о том, кто загрузился, а кто - нет (чтобы не получился классический callback-hell). Она должна быть первым скриптом на странице. А загрузившиеся потом скрипты будут ей сообщать "я загрузился", а потом у нее спрашивать "ну что, вон тот уже загрузился?" а она такая "да", и они будут выполняться сразу, или "нет, пока нет", а они такие "ну ок, когда загрузится, скажи". Что-нибудь в таком духе. Также эта штука может помогать при отладке, чтобы понимать, что реально произошло на странице, а что еще нет.

если добавляю 1-2 svg, то все норм, но стоит добавить больше, то во-первых на некоторых изображениях какого-то фига меняется цвет заливки, во-вторых некоторые элементы одного SVG файла не отображаются.

Вангую, что в SVG файлах есть id у масок, фильтров и.т.д. Пока SVG находится в вакууме, как отдельная картинка, все ок. Когда вы вставляете SVG-картинки прямо в страницу - все id попадают как бы в "общую область видимости" страницы. А как мы знаем id на странице не должны дублироваться. Ваша магия очень похожа на то, что что-то где-то продублировалось. Так что вам нужно пройтись по всем SVG и сделать везде уникальные id для элементов, чтобы при вставке в страницу не было нигде дублей.

В postcss-trolling есть готовая CSS анимация под вашу задачу. Нужно лишь задать разный animation-delay элементам (возможно с помощью :nth-of-type или :nth-child).

Попробуйте использовать пресет не "env" из "babel-preset-env", а "@babel/preset-env" из одноименного пакета.

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

Буквально на днях написал статью о том, как все это делается: Делаем интерактивный план местности за 15 минут. Там все основные вопросы и проблемы разобраны. Конкретно в вашем случае скорее всего (без кода не угадать) нужно перебивать ранее заданные стили, либо добавить заливку контурам, где ее нет - умные браузеры не всегда распознают наведение мыши на не залитые элементы в SVG.

С помощью чего и как можно реализовать вот такую расстановку блоков?

На ум сразу приходит masonry.