Aetae

А почитать что тебе пишет, а посмотреть что ты пишешь?=\

Refused to apply style from 'https://localhost:3000/css/desctop/main_d.css.css%22%3E' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled.Understand this errorAI

'https://localhost:3000/css/desctop/main_d.css.css%22%3E'

main_d.css.css%22%3E

res.send(`https://localhost:3000/css/desctop/${base}">`)
`https://localhost:3000/css/desctop/${base}">`
${base}">
">

У тебя в ссылке лишний "> из-за чего ссылка ведёт никуда, из-за чего сервер возвращает 404 страницу, которая html.

На макете нет никаких border, потому проще всего сделать обычным clip-path:

А вот если таки понадобится border, то тогда уже придётся придумывать всякое.

Ни в чём. Ошибка у тебя скорее всего в html, который ты не привёл.
// разве что чтоб шаблоны в строках работали надо использовать ` а не ".

Боль-мене универсально с помощью clip-path и трюка с позиционированием:

Ответ на твой вопрос: именно так как ты и записал. Задача решена.

Ответ на настоящий вопрос: изменить метод, которым ты выводишь этот json на страницу с вывода текста, на вывод html.
В зависимости от того чем ты пользуешься для вывода настройки будут разными, так что требуется больше информации. Если ты используешь ванилу - смени textContent\innerText\append на innerHTML\insertAdjacentHTML.

P.S. Если данные в этом json могут содержать пользовательские данные, а не только то что напишешь лично ты, то не забудь подключить библиотеки-санитайзеры, иначе тебе быстро всё сломают хацкеры.

transform: matrix3d

clip-path прекрасно умеет скруглять, rtfm.

Вот через фильтр, когда-то похожее делал:

Принцип прост: размываешь подложку через feGaussianBlur, делаешь края снова резкими через ComponentTransfer альфа-канала. В твоём случае ещё stroke и drop-shadow наверное понадобятся, сам смотри.

...upd: из интереса нафигачил без фильтров:

Всё возможно.:)

Поигрался пут с фильтром, вот версия фильтр + простой clip-path, поддерживает полупрозрачность фона, полупрозрачность бордера и тень:

clip-path'ом вырезаем простые квадраты, фильтром закругляем. Фильтр можно в принципе применять к любому набору элементов. Версия не последняя, есть шероховатости, может ещё когда-нить потыкаю ещё.:)

Именно в таком виде код в обычном html будет работать прекрасно. Ищи проблему в ином месте.
// поставил true чтоб собственно вызов происходил.

У flex есть свойство order.
Просто сделай что-то типа:

block:nth-child(odd) block__element {
  order: 2
}

И оно само выстроится с периодичностью.

display: inline-block;?

Ну собсно как и всегда когдадокументация говно - идёшь на гитхаб, там открываешь код и смотришь как оно работает.
Тут благо прямо в коде есть ссылка на описание кастомных иконсетов. Точно также как там в примере кастомный иконсет inline, тут используется кастомный иконсет settings.

Возможно ты имеешь ввиду CDN?

В таком случае всё зависит от преимуществ и недостатков, рассмотрим основные:
Серьёзный недостаток: cdn под контролем третьей стороны: он может быть скомпрометирован, он может прекратить работу, он может тормозить.
Потенциальное преимущество: cdn от крупных компаний может быть быстрее, т.к. сервера могут втыкаться прямо в точки обмена трафика и дублироваться максимально близко к пользователю.
Устаревшее главное преимущество: раньше библиотека с cdn кэшировалась раз и навсегда для всех сайтов оную использующих. Закэшировал на одном сайте - на другом она уже в кэше. Увы, все современные браузеры "ради безопасности" реализуют cache partitioning или что-то подобное, где для каждого сайта свой кэш, что полностью исключает данное преимущество.

Итого, в современном вебе недостаток перевешивает.

Не всегда, в некоторых случаях 0% != 0, например для flex-basis. :)