Как сверстать такой блок?

Ссылка скопирована
6 января 2026 1 ответ

Здравствуйте!
Как сверстать такие треугольники?
Как правильно будет?

Как сверстать такой блок?

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

SVG?

  • IvanU7n, Можно скачать в Фигма экспортировать SVG.
  • если это на сайте открыто, там и посмотри через Инструмент разработчика, как сделано
  • RushV, я имел ввиду, что если разрешён SVG, но делать через накладывание его поверх фотки
  • IvanU7n, Так лучше будет?
  • RushV, по возможности, предварительно засунуть в псевдоэлемент, чтобы svg не болтался в разметке.
  • Ответы:

    Для того что бы так сделать нужно использовать clip path.

    Самый простой вариант сделать в png к примеру верхнюю картинку, просто вгрузить img, и через background задать подложку

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

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

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

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

     с атрибутом lang="php". Этот атрибут позволяет указать язык программирования, для которого будет применена подсветка синтаксиса.

    Пример верстки блока с кодом на PHP с использованием тега

    :

     

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

    Кроме того, для улучшения визуального отображения кода, можно добавить стили CSS для блока

    , чтобы изменить его фон, шрифт и цвет текста. Например:

    ```css
    pre {
    background-color: #f4f4f4;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-family: 'Courier New', Courier, monospace;
    font-size: 14px;
    line-height: 1.5;
    }
    ```

    Этот CSS стиль добавит блоку

     серый фон, рамку, отступы и шрифт Courier New.

    Таким образом, использование тега

     с атрибутом lang="php" и добавление стилей CSS поможет вам создать красиво оформленный блок с кодом на вашем сайте.

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

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

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

    комментарий

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

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