tabel cellen met merkteken(driehoek)
Ik zou bepaalde cellen willen merken met een driehoekje.
dank zij: https://stackoverflow.com/questions/14499048/how-to-add-triangle-in-table-cell heb ik een goede start maar als ik meerdere tekens probeer lukt het me niet meer. IEmand een idee om dit op te lossen?
Jan
mijn poging
Zoals je ziet zou in de onderste lijn meerdere driehoekjes moeten staan maar ze staan er dus niet.
Gewijzigd op 14/10/2021 14:08:40 door Jan R
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<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>
#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/
Jan
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).
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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>
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>