4

Cenário teste

Tenho um input em um <td>, em que o fundo do <td> tem cor:

td {
  padding: 2em;
  background-color: yellow;
}
<table>
  <tr>
    <td class="marcado">
      <input type="number"/>
    </td>
  </tr>
</table>


Dúvida

  • Gostaria de saber, como posso criar uma "marca d'água" com o CSS nesse fundo do <td>, para que eu possa utilizá-lo incluindo pela class (no exemplo, classe "marcado").

Exemplo de possíveis resultados esperados

prospecto

1
  • 2
    Tem coisas que é melhor com imagens, eu sei que tem as dicas com CSS puro, mas tem coisas que se for falar dos problemas ou da complexidade daria duas páginas de texto, então vou me limitar a isso, background-image e SVG casariam bem para resolver o seu caso ;)
    – Syzoth
    Commented 19/02/2020 às 17:55

2 Respostas 2

4

Aqui tem um exemplo, é 100% com CSS e tudo feito com background, repare que mesmo se um input for maior o canto não deforma. E vc pode controlar facilmente o tamanho da marca pelo background-size

.marcado {
  padding: 2em;
  background-image: 
  linear-gradient(135deg, transparent 0%, transparent 50%, red 50%, red 55%, transparent 55%, transparent 60%, red 60%), 
  linear-gradient(yellow, yellow);
    /*controla o tamanho do chanfro vermelho aqui*/
  background-size: 40px 40px, 100% 100%;
  background-position: right bottom;
  background-repeat: no-repeat;
}
<table>
  <tr>
    <td class="marcado">
      <input type="number"/>
    </td>
  </tr>
</table>

<table>
  <tr>
    <td class="marcado">
      <input type="number" style="width: 400px;" />
    </td>
  </tr>
</table>

2

Você pode fazer isso com HTML e CSS utilizando o elemento before E então utilizar uma classe como "-active" para mostrar ou esconder o mesmo

table td {
  padding: 2em;
  background-color: #ff0;
  position: relative;
  overflow: hidden
}

table td:before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background-color: red;
  right: -30px;
  bottom: -30px;
  transform: rotate(45deg)
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<table>
  <tr>
    <td class="marcado">
      <input type="number"/>
    </td>
  </tr>
</table>

4
  • 1
    Cara uma dica, não precisa publicar 2 resposta, apenas edite a outra antiga e inclua o snippet do código nela
    – hugocsl
    Commented 19/02/2020 às 17:36
  • 1
    Primerira vez respondendo aqui heheheh Valeu amigo Commented 19/02/2020 às 17:43
  • Já fica a dica rss
    – hugocsl
    Commented 19/02/2020 às 17:44
  • Willyan, mas se eu fizer dessa forma, todas ficaram com a marca, não é? você adicionou direto no td, eu queria que fosse uma classe, assim eu adiciono só em alguns...
    – rbz
    Commented 19/02/2020 às 17:44

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .