0

Коллеги, добрый день.

Есть макет. Сверстал header, "hero" секцию и секцию с карточками товаров ниже. Встрял с реализацией нижней части "hero" секции (или это секция относится к секции с карточками товаров) - собственно в этом и есть мой вопрос. Речь об изогнутом бордере на котором изображены круглые бейджи.

К какой секции это место отнести? И собственно что вы можете посоветовать по реализации?

Буду признателен за любую помощь!

Скрин прилагается.введите сюда описание изображения

6
  • добавьте свой код в вопрос, без кода вряд ли кто с нуля будет вам всё расписывать.
    – TaniaLinn
    Commented 25 авг. 2022 в 13:26
  • p.s. прикольный макет с ежиками :) а можно целиком его посмотреть где-то?
    – TaniaLinn
    Commented 25 авг. 2022 в 13:30
  • Полностью к сожалению не могу предоставить)
    – user504975
    Commented 25 авг. 2022 в 14:15
  • А по поводу кода: расписывать не надо. Есть вообще идеи как это место можно реализовать?
    – user504975
    Commented 25 авг. 2022 в 14:16
  • Я бы это выделил в отдельный блок, наверное, а сверстать можно с помощью SVG.
    – DronDron
    Commented 25 авг. 2022 в 14:18

1 ответ 1

0

ну вариантов не так что бы прям много.

в качестве кругляшков с текстом конечно вертикальные flex"ы


а на счет бордюра

  1. конечно можно почитерить с SVG
  2. на фон картинку
  3. пусть это будет контейнер-обёртка для кругляшков, примерно такой:

border-top: 1px; width 1000%; height: 1000%; border-radius: 1000%;

разумеется его края надо будет overflow: hiden; обернув во что то с width: 100%;

+ боковыми padding'ами зажать контент в его центре, при этом топовый паддинг стоит как минимум обнулить, мб еще кругляшки высунуть на top: -50%; (50% своей высоты разумеется).

ну и под кругляшками конечно box-shadow: white

я это вижу как то так...

1
  • Попробую! Спасибо большое!
    – user504975
    Commented 26 авг. 2022 в 11:03

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.