tabel cellen met merkteken(driehoek)

Zoiets?

<style>
#triangle {
	width: 300px;
	height: 300px;
	background: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAHqADAAQAAAABAAAAHgAAAADKQTcFAAAAHGlET1QAAAACAAAAAAAAAA8AAAAoAAAADwAAAA8AAADJQt6m1AAAAJVJREFUSA3E0msOgjAMAGCOtPaMig8Q9RztfbadRmhJSAiom3vYpD/WR74saeMInp7xVTsbiX/gCivO+Kj56wVWnPBeC1/B8rBkhhr4Blac4VYa34Wl6An6kvhbWBqOsCuFf4QVZ7yWwL/CipO55MaD4BmHc048GJZBy3DKhUfBMjxde5sDj4ZnHI+p+E+wLDk2hxR8BAAA///0k68yAAAAoUlEQVTF0gsOgyAMBmCPBNxtU+c2X7eh3gc4jdYsJIQA6ijRxIjQ/l9IWlUZjwY+m0Ws/7wZ7K8V8ekWeOfVwserePaNbYACMVzBbR/J1wDrz+IkoBtiJP+ewd0esjUO3OcIJ8P8IMTfKdyvJ/3XUnQxnBQKhSlgrxAeqiXfQ7z1cXIkFojT3rh4rK7IPg5cbfEiQCpUg3jueKqm2JmW7LEBLTHeAaH1D6wAAAAASUVORK5CYII=');
	background-position: top right;
	background-repeat: no-repeat;
	border: 0.100em solid #999;
}
</style>

<div id="triangle"></div>

https://www.w3schools.com/cssref/pr_background-position.asp

https://www.base64-image.de/

Nee zal ook niet lukken. Via achtergrond heb je maar 1 foto ik wil een combinatie mogelijkheid van 8 dus dat zou 256 foto's worden. Eveneens als foto zal de hoek vertekenen als deze wijzigd in groootte

Jan

Naast een :after kun je ook nog een :before gebruiken, maar dan heb je een maximum van twee hoekjes.

Je kunt ook per hoekje een <span> toevoegen (binnen de <td> dus). Dus gewoon een echt element, ipv een pseudo element. En die dan absoluut positioneren tov de <td> (top, left, right, en/of bottom).

td{
  position: relative;
}
td span.note{
  position: absolute;
  display: block;
  border: 10px solid black;
}
td span.note.b1{
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-color: red;
  border-right-color: transparent;
  border-bottom-color: transparent;
}

<td><span class="note b1"></span><span class="note w1"></span><span class="note g1"></span>b1</td>

De span neemt niet de hoogte en breedte aan van de td :) en die is niet altijd even breed/hoog