Популярный пост
Как сделать border градиентом
Простые градиенты
Для этого используется свойство border-image со значением linear-gradient() и border-image-slice: 1. Предварительно нужно обязательно задать обычную границу указав толщину, стиль и преобладающий на градиенте цвет.
See the pen (@Websitio) on CodePen.
See the pen (@Websitio) on CodePen.
Ещё несколько примеров создания необычных границ для блоков с помощью CSS
See the pen (@Websitio) on CodePen.
See the pen (@Websitio) on CodePen.
Граница, как у ретро почтовых конвертов
See the pen (@Websitio) on CodePen.
Закругленные уголки и border градиентом
Простой современный способ основан на свойстве background-origin.
Свойство CSS background-origin устанавливает положение фона относительно границы элемента и его отступов. Подробнее о нем на MDN
Для элемента задается множественный фон, состоящий из двух градиентов. Верхний состоит из двух одинаковых цветов для заливки и имеет padding-box. Так делаем потому что не имеем возможности поместить фоновый цвет в верхний слой background. Нижний градиент это тот самый, цветной, нужный нам, градиент и border-box
Осталось задать прозрачную границу той толщины, которой хотим видеть градиент. И при необходимости, скруглить её
See the pen (@Websitio) on CodePen.
Альтернативные, более сложные способы
К сожалению, в этом случае не получится обойтись простыми свойствами и нужно немножко помудрить. С помощью ::before сделать подложку с фоновым градиентом, а сверху сам div с фоном совпадающим с общим фоном.
See the pen (@Websitio) on CodePen.
Трюк с маской
Для этого решения мы также будем использовать псевдоэлемент и свойство mask для обрезки фона
Поддержка mask: https://caniuse.com/css-masks.
Установим фон элемента как градиент. А затем, используя свойство mask, укажем еще два градиентных фона (того же цвета, что и body (не обязательно)). Первый будет маскировать (покрывать) область в пределах границ отступа, а второй маскировать (покрывать) область вплоть до границы.
Кроме того, нужно установить mask-composite, чтобы исключить верхний слой из нижнего, чтобы увидеть границу.
See the pen (@Websitio) on CodePen.
Border градиентом для таблицы
Тут трюк заключается в том, что мы должны убрать сами границы, запретить схлопывание границ и задать градиент для таблицы, а ячейки залить цветом основного фона.
See the pen (@Websitio) on CodePen.
А если это grid или flex и ячеек не хватает?
Тогда принцип будет аналогичным, но нужно будет чем-то перекрыть пустое место в правом нижнем углу. Варианты могут быть разными. Можно добавить псевдоэлемент для обертки и flex-grow: 1, если родитель флекс или растянуть его на несколько ячеек грида. Правда, для грида, в этом случае понадобится :has и
логическая стилизация на основе количества элементов. А это не всегда возможно вычислить.
Я хочу показать интересный вариант с псевдоэлементом от последнего пункта списка и тенью. Суть в том, что псевдоэлемент будет иметь ширину 100vw, абсолютное позиционирование налево от правого края и тень в цвет основного фона направо. Именно эта тень и перекроет нужный нам угол блока.
See the pen (@Websitio) on CodePen.
Посмотрите интересные примеры анимации градиентов на чистом CSS