htmlcss

Paint inside of a td cell with CSS and rect()

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

I want to have a small red rectangle at the top right of my yellow cell.

I think about to place a rect() inside my style-attribute for background - but I am not sure about it.

My goal:

enter image description here

Solution

  • Use a gradient

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