Quero que o texto (nesse caso dentro de um <h1>
) tenha um fundo colorido, onde os limites direito e esquerdo sejam inclinados. Algo assim:
Eu sei que eu deveria fazer isso definindo um fundo como linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
(que eu usei para este exemplo), mas eu não consigo acertar os limites esquerdo e direito. Eu acho que o problema é que eu preciso definir valores de início e fim para o gradiente (5% e 95% neste exemplo), mas isso significa que dependendo do comprimento do texto, a transição é "em algum lugar".
h1 span {
background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
padding-left: 0.8rem;
margin-right: 1rem;
}
<h1> <span> This is a title </span> </h1>
Note que tive que mexer manualmente padding-left
e, margin-right
de alguma forma, fazer com que parecesse aceitável (mesmo que haja muito espaço à direita de "título"?).
Se eu aumentar o texto, o mesmo CSS produz isto:
Provavelmente isso ocorre porque 5% e 95% da <span>
largura do 's agora estão em posições diferentes, certo?
O que eu gostaria é de uma solução que:
- Sempre funciona independentemente do comprimento do texto
- Permite-me controlar o ângulo de inclinação (12° neste caso)
- Não distorce o texto em si
- Funciona com texto multilinha
- Não corta o fundo inclinado (veja o limite direito do segundo exemplo acima)
- Tem um pequeno espaço entre a primeira letra e o limite esquerdo da caixa de fundo, e a mesma quantidade de espaço entre a última letra e o limite direito da caixa de fundo.
Tentei definir os limites para " linear-gradient
to " 0.001%
e 99.999%
"or" algo, mas isso essencialmente remove as bordas inclinadas: