Как сделать ромбообразную сетку?

Ссылка скопирована
CSS Flexbox HTML
19 апреля 2026 1 ответ

Нужно сделать сетку, как на картинке, никаких идей нет. Заказчик сказал, что она делается grid, но я в этом не уверен.

Как сделать ромбообразную сетку?

Дополнительно:

svg?
опять же, с разным масштабом будет иная картинка.

  • Dmitry Bay, что именно вы имеете ввиду?
  • 1. Подложку градиентами.
    Элементы гридом.

    2. Элементы гридом, бордеры, rotate.
    Внутренности поворачиваем в обратную сторону.

    3. Фон svg
    Элементы гридом

    4. Всё SVG

  • Ankhena, не совсем понимаю, что вы имеете ввиду под подложками. мне нужно сделать эту сетку адаптивно, поэтому всё подставлять в svg не лучшее решение
  • faer23, вы хотите сказать что свг не резиновое ?
  • faer23, присоединяюсь к вопросу Максима.
    SVG как раз таки весь из себя резиновый.

    Подложка = фон, псевдо нижним слоем грида... Как хотите.

  • А по-моему вполне себе квадратная, просто фон подложить повторяющийся

    Как сделать ромбообразную сетку?

    • Ответы:

    Это ведь сетка, состоящая из квадратов под углом 45 градусов, не так ли?

    • да
    • проблема даже не в их форме, а в их положении
    • faer23, разве это является проблемой?
    Нужно решить такую задачу?

    Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.

    Заказать помощь
    Лучший ответ
    1
    Павел Админов Ответ

    Для создания ромбообразной сетки вам понадобится использовать HTML и CSS. Вот пример кода, который поможет вам создать такую сетку:

    HTML:

    <div class="diamond-grid">
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
  <div class="diamond"></div>
</div>

    <div class="diamond-grid"> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> <div class="diamond"></div> </div>

    CSS:

    .diamond-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}
 
.diamond {
  width: 0;
  height: 0;
  border: 50px solid transparent;
  position: relative;
}
 
.diamond:before {
  content: "";
  position: absolute;
  top: -50px;
  left: -50px;
  width: 0;
  height: 0;
  border: 50px solid transparent;
  border-bottom-color: #333;
}

    .diamond-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 100px; } .diamond { width: 0; height: 0; border: 50px solid transparent; position: relative; } .diamond:before { content: ""; position: absolute; top: -50px; left: -50px; width: 0; height: 0; border: 50px solid transparent; border-bottom-color: #333; }

    Этот код создаст ромбообразную сетку из пяти элементов. Вы можете настроить количество элементов, их размеры и цвета, изменив соответствующие значения в CSS. Важно помнить, что ромбообразная сетка может быть сложной для реализации и может потребовать дополнительных стилей и настроек в зависимости от ваших конкретных потребностей.

    Другие ответы (0)

    Пока нет других ответов. Будьте первым, кто поможет автору.

    Ответить на вопрос

    комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *

    Вам также может быть интересно

    VPN Как правильно настроить vless для Android TV? 0 ответов Pyrogram Как правильно зарегистрировать юзер бота в Telegram? 0 ответов печатные-платы Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro? 0 ответов VPN Почему не работает связка 3X-UI на своем VPS и Necobox на Windows 10 и где искать причину? 0 ответов