Início / coding / Perguntas / 79436006
Accepted
chris01
Asked: 2025-02-13 19:33:55 +0800 CST

Pinte dentro de uma célula td com CSS e rect()

  • 772

<table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td style="background: yellow;">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

Quero ter um pequeno retângulo vermelho no canto superior direito da minha célula amarela.

Estou pensando em colocar um rect() dentro do meu atributo de estilo para o plano de fundo, mas não tenho certeza.

Meu objetivo:

insira a descrição da imagem aqui

html

3 respostas

  1. Basta usar um pseudoelemento.

    td {
  position: relative;
}

tr:nth-child(2) td:after {
  content: "";
  position: absolute;
  top: 2px;
  right: 2px;
  width: 6px;
  aspect-ratio: 1;
  background: red;
}
    <table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td style="background: yellow;">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

    • 2
  2. Best Answer

    Use um gradiente

    <html>
<body>
<table style="border: 1px solid black;">
    <tr>
       <td style="width: 200px;">aaaaaa</td>
    </tr>
    <tr>
       <td style="background: conic-gradient(at right 5px top 5px, red 25%,yellow 0);">bbbbbb</td>
    </tr>
    <tr>
       <td>ccc</td>
    </tr>
</table>
</body>
</html>

    • 2

  3. Você precisa adicionar uma classe, por exemplo, activena tdqual você quer esse retângulo.

    A activeclasse terá position: relative;e o :afterelemento disso pode ser posicionado com position: absolute;.

    td.active {
  position: relative;
  background: #FF0;
}

td.active:after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  height: 5px;
  aspect-ratio: 1;
  background: #F00;
}
    <table style="border: 1px solid black;">
  <tr>
    <td style="width: 200px;">aaaaaa</td>
  </tr>
  <tr>
    <td class="active">bbbbbb</td>
  </tr>
  <tr>
    <td>ccc</td>
  </tr>
</table>

    • 0

relate perguntas