Мобильная версия
Я знаю, что мне следует сделать это, установив фон, например, Linear-gradient(102deg, #ffffff00 5%, blue 5% 95%, #ffffff00 95%); (который я использовал для этого примера), но я не могу правильно определить левую и правую границы. Я думаю, проблема в том, что мне нужно установить начальные и конечные значения градиента (5% и 95% в этом примере), но это означает, что в зависимости от длины текста переход происходит «где-то».
Код: Выделить всё
h1 span {
background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
padding-left: 0.8rem;
margin-right: 1rem;
}Код: Выделить всё
This is a title JSFiddle
Обратите внимание, что я вручную приходилось экспериментировать с отступами слева и поля справа, чтобы хоть как-то выглядеть нормально (даже несмотря на то, что справа от «заголовка» слишком много места?).
Если я сделаю текст длиннее, тот же CSS даст следующее:
[img]https://i. sstatic.net/QxHvxUnZ.png[/img]
Вероятно, это потому, что 5% и 95% ширины теперь находятся в разных позициях, верно?
Мне хотелось бы решение, которое:
[*]Всегда работает независимо от длины текста
Позволяет мне контролировать угол наклона (в данном случае 12°)
[*]Не искажает сам текст
[*]Позволяет мне контролировать угол наклона (в данном случае 12°).
[*]Не не искажает сам текст
Работает с многострочным текстом.
[*]Не обрезает наклонный фон (см. правую границу второго примера выше).
[*]Имеет небольшое пространство между первой буквой и левой границей фонового поля и такое же пространство между последней буквой и правой границей фонового поля.
Я пробовал установить границы линейного градиента на 0,001% и 99,999% или что-то в этом роде, но это по существу удаляет наклонные границы:
Подробнее здесь: https://stackoverflow.com/questions/791 ... background
