Как стилизовать данный элемент?

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

Подскажите как правильно стилизовать элемент-квадрат у которого border-color задан как градиент
Стили которые использую я:

.benefits:before {     content: '';     display: block;     max-width: 900px;     width: 100%;     height: 770px;     position: absolute;     bottom: 170px;     left: 0;     border: 30px solid transparent;     background-image: linear-gradient(90deg, #9A762F 0%, #F2C977 100%);     background-clip: content-box; /* Устанавливает, чтобы фон не распространялся за пределы границы */ }

.benefits:before { content: ''; display: block; max-width: 900px; width: 100%; height: 770px; position: absolute; bottom: 170px; left: 0; border: 30px solid transparent; background-image: linear-gradient(90deg, #9A762F 0%, #F2C977 100%); background-clip: content-box; /* Устанавливает, чтобы фон не распространялся за пределы границы */ }

Вот что получается:

Как стилизовать данный элемент?

А вот так должно быть:

Как стилизовать данный элемент?

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

ну положите внутрь белый квадрат

  • Сергей delphinpro Не очень вас понимаю
  • Дмитрий Ярощук, да что там понимать

    snippet

  • Ответы:

    https://jsbin.com/tojomoyubi/edit?html,css,output

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

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

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

    Для стилизации элемента

     с языком программирования PHP можно использовать CSS. Вот пример стилей, которые можно применить для этого элемента:

    pre {
      background-color: #f4f4f4;
      padding: 10px;
      border: 1px solid #ccc;
      border-radius: 5px;
      font-family: monospace;
      font-size: 14px;
      line-height: 1.5;
      overflow: auto;
    }

    pre { background-color: #f4f4f4; padding: 10px; border: 1px solid #ccc; border-radius: 5px; font-family: monospace; font-size: 14px; line-height: 1.5; overflow: auto; }

    В данном примере мы задали серый фон элемента

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

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

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

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

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

    комментарий

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

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