"Watermark" with CSS

Question

Test scenario

I have an input on a <td>, in which the background of <td> has color:

td {
  padding: 2em;
  background-color: yellow;
}

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

---

Doubt

• I wonder, how can I create a "watermark" with the CSS in that background of <td>, so that I can use it including by class (in the example, class "marked").

---

Example of possible expected results

Answer 1

Here’s an example, it’s 100% CSS and all done with background, note that even if an input is larger the corner does not deform. And vc can easily control the size of the tag by 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>

Answer 2

You can do this with HTML and CSS using the before element And then use a class as "-active" to show or hide it

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>