Как сверстать такое?

Ссылка скопирована
CSS HTML PHP
14 февраля 2026 1 ответ

Как сверстать такое?

Как сделать такие рамки в а также как сделать такие линии которые уходят от них влево?

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

задача довольно нестандартная, прям идеального кого-то решения вряд ли существует, скорее всего это либо будут манипуляции с градиентом либо svg

я бы советовал не парится, и тупо взять svg и влупить, а линии абсолютом

  • а я бы посоветовал просто глянуть в devtools
  • border-image
    gradient
    псевдо
    svg
    и т.д.

    линии влево абсолютами либо гридами

  • modelair, а если это макет? )))
  • rootnoroot, конечно это макет)
  • какие-то идиоты считают что их полотенца покупают из-за "высокотехнологичного нетканного полотна", какое чудо
  • nolotion, куча идиотов что-то считают и думают, се ля ви
  • Одиночка Айс, пусть думают умные )

    • Вёрстка состоит из разных слоёв, накладываемых один на другой. Читай про Z-order, compositing.
    Кусок изображения с полотном слева выглядит как обрамление в прямоугольник с закруглёнными краями большого радиуса, рамкой и тенью.
    Изображение в круге - также обрамление в окружность. Примеры: https://pqina.nl/blog/applying-a-circular-crop-mas...
    Линии прямоугольника можно сделать сначала как прямоугольники со сплошными линиями, а сверху наложить другие прямоугольники с цветом фона. Таким образом, получится эффект прерывистости. А если делать гораздо проще, то просто взять готовое изображение PNG с прозрачным альфа-каналом в виде фона.

    Ответы:

    насчет линий, можно попробывать transform rotate*(45deg) или -45 там уже методо тыка

    Нужно решить такую задачу?

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

    Заказать помощь
    Лучший ответ
    1
    Елена Вебер Ответ

    Для верстки блока с кодом на сайте можно использовать тег 

     с атрибутом lang="php". Внутри этого тега можно разместить код на языке программирования PHP. Например:
    


     
    


    Этот код будет отображаться на странице как блок с отступами и моноширинным шрифтом, что делает его легче читаемым для пользователей. Тег 
    

     используется для предварительно форматированного текста, поэтому он идеально подходит для отображения кода.
    

    Если вы хотите добавить несколько блоков с кодом на разных языках программирования, вы можете использовать различные значения атрибута lang. Например, для HTML:
    


     
 
 
  <title>My Website</title>
 
 
  <h1>Welcome!</h1>
    


  <title>My Website</title>


  <h1>Welcome!</h1>
    


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

     с соответствующим значением атрибута lang. Это поможет сделать ваш код более читаемым и понятным для пользователей.
    Другие ответы (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 ответов