Início / coding / Perguntas / 79192415
Accepted
Lukas Barth
Asked: 2024-11-15 20:39:15 +0800 CST

Texto com fundo inclinado [duplicado]

  • 772

Quero que o texto (nesse caso dentro de um <h1>) tenha um fundo colorido, onde os limites direito e esquerdo sejam inclinados. Algo assim:

Texto 'Este é um título' com um fundo colorido

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>

JSFiddle

Note que tive que mexer manualmente padding-lefte, margin-rightde 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:

Um título mais longo com fundo colorido

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-gradientto " 0.001%e 99.999%"or" algo, mas isso essencialmente remove as bordas inclinadas:

Um título mais longo, desta vez o fundo não está inclinado

html

6 respostas

  1. Best Answer

    O que você está bloqueando é a propriedade transform: skew().

    Basta dar ao contêiner seu valor e aos seus elementos filhos o valor oposto.

    .skew {
  background: #ff00ff;
  text-align: center;
  padding: 1rem;
  width: 60%;
  transform: skew(-20deg);
  margin: 0 auto;
}

h1 {
  transform: skew(20deg);
}
    <div class="skew">
  <h1>Hello World!</h1>
</div>

    • 4

  2. Você pode usar a propriedade skew do transofrm.

    Substitua a cor de fundo pelos seus gradientes.

    Espero que isso ajude.

    h1 {
  padding: 2px;
  background: #000;
}
h1 span {
  background: red;
  display: inline-block;
  transform: skew(-20deg);
  padding: 5px;
  color: #FFF;
}
    <h1> <span> This is a title </span> </h1>

    • 3

  3. Basta usar padding-leftand padding-right 5%, porque esse é o preenchimento do linear-gradienttoo.

    h1 span {
  background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
  padding-left: 5%;
  padding-right: 5%;
}
    <h1> <span> This is a title </span> </h1>

    • 2 

  4. h1 {
  padding: 2px;
  background: #000;
}
h1 span {
  display: inline-block;
  padding: 5px 15px;
  color: #FFF;
  position:relative;
  z-index:0;
}
h1 span:before{
  position:absolute;
  content:'';
  background:linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);;
  left:0;
  right:0;
  top:0;
  bottom:0;
  transform: skew(-20deg);
  z-index:-1;
}
    <h1> <span> This is a title </span> </h1>

    • 1 

  5. h1 span {
padding: 10px;
margin: 10px;
background: linear-gradient(to bottom right, transparent 50%, lightblue 50%),
linear-gradient(lightblue, lightblue),
linear-gradient(to top left, transparent 50%,lightblue 50%);
background-repeat: no-repeat;
background-size: 10px 40px, calc(100% - 20px) 40px, 10px 40px;
background-position: left center, center, right;

}
    <h1> <span> This is a title </span> </h1>
<h1> <span> This is a longest title that are highlighted </span> </h1>

    Você pode tentar isso, espero que seja útil

    • 0 

  6. h1 {
  padding: 2px;
  background: cyan;
  font:bold,italic;
}
 span {
  background: linear-gradient(102deg, #ffffff00 5%, lightblue 5% 95%, #ffffff00 95%);
  display: inline-block;
  padding-right:50%;
  padding-left:50%;
  color: #FFF;
  margin-left:30px;
  padding:10px;

}

  
    <h1> <span> This is a title <span> </h1>

    • -1

relate perguntas