@mikilikala
На фронте

Как сделать такую линию с использованием градиента?

Как сделать такую линию с использованием градиента?
Линия по краям начинает "затемняться"
606db0a8b5e9c715635828.png
  • Вопрос задан
  • 122 просмотра
Решения вопроса 1
zb_venom
@zb_venom
Жизнерадостный чебурек
Пригласить эксперта
Ответы на вопрос 2
Ankhena
@Ankhena Куратор тега Вёрстка
Нежно люблю верстку
Просто псевдо, в нем черный фон и градиент высотой в одну точку.
Прямо в этом же div можно писать текст. Псевдо, при необходимости, можете двигать абсолютом.
Никаких лишних блоков для этого создавать не нужно.
https://jsfiddle.net/25gLvr6s/

background: #000 linear-gradient(to right, transparent, darkred, transparent) no-repeat left center / 100% 1px;


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

Вот так: https://jsfiddle.net/ayc3hbo6/
Ответ написан
Комментировать
@Lord_Dantes
Псевдо-элемент ::before с высотой 1px и градиентным фоном.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы