Skip to main content
revisão de informação
Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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;
}
<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>

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

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;
}
<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>

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

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>

Fonte Link
hugocsl
  • 66,9mil
  • 17
  • 88
  • 166

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;
}
<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>

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