tabel cellen met merkteken(driehoek)

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Java developer met testervaring

Java developer met testervaring Functieomschrijving "De drempel tussen de burger en de Belastingdienst zo laag mogelijk houden: dat is de belangrijke taak van ons team. Dit doen we door het burgerportaal Mijn Belastingdienst continu te verbeteren." René, Java-specialist bij de Belastingdienst. De keten Interactie is een samenwerkingsverband van alle dienstonderdelen binnen de Belastingdienst. Samen zorgen we dat het contact met burgers en bedrijven goed kan plaatsvinden. Onze belangrijkste opgave? Zoveel mogelijk digitaliseren. Dat doen we binnen het onderdeel Informatievoorzieningen (IV), de ICT-organisatie van de Belastingdienst. Denk bij de producten die IV-Interactie ontwikkelt en onderhoudt aan portalen, formulieren en authenticatie- en

Bekijk vacature »

Jan R

Jan R

14/10/2021 14:07:47
Quote Anchor link
Hoi

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

PHP hulp

20/10/2021 06:01:03
 
Adoptive Solution

Adoptive Solution

14/10/2021 15:41:09
Quote Anchor link
Zoiets?

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>


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

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

Jan R

14/10/2021 18:42:16
Quote Anchor link
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
 
Rob Doemaarwat

Rob Doemaarwat

14/10/2021 20:57:16
Quote Anchor link
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).
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
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>
 
Jan R

Jan R

14/10/2021 22:07:46
Quote Anchor link
De span neemt niet de hoogte en breedte aan van de td :) en die is niet altijd even breed/hoog
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.