Home
Er wordt gebruik gemaakt van grid-template-areas om een grid op te stellen in combinatie met grid-template columns en grid-template-rows. Het aantal en de grootte worden aangepast gebaseerd op de breakdown schetsen. Er wordt voor de laatste 5 layouts gebruik gemaakt van grid-area op de children om ze te plaatsen in het grid. Dit is een shorthand property die grid-row-start grid-column-start, grid-row-end en grid-column-end combineert om de plaatsing van de elementen te bepalen.
Er is gebruik gemaakt van een rotate om de 2 elementen die op elkaar geplaatst zijn te weergeven zoals gevraagd.
Er wordt gebruik gemaakt van z-index om de elementen over elkaar te weergeven. Er was voor het eerst noodzaak om grid-area te gebruiken om het gele oppervlak te stretchen.
Er is gebruik gemaakt van clip-path om en een polygon() masker over het element te weergeven dat de diagonale snee weergeeft zoals gevraagd. Om de elementen in een rechte diagonale lijn te krijgen is er gebruik gemaakt van een extra lege grid row in het midden van de 4 elementen.
Er is gebruik gemaakt van rotateen z-index om de elementen te weergeven zoals gevraagd. Om het zwarte oppervlak in de correcte positie te krijgen is er gebruik gemaakt van transform-origin.
Er is gebruik gemaakt van rotateen scaleom het blauwe element als het ware uit het scherm te laten verdwijnen. Om het zwarte element als een driehoek te krijgen is er wederom gebruik gemaakt van clip-path met een polygon() mask.
Er is gebruik gemaakt van border-radius om de elementen rond te krijgen. Verder is er gebruik gemaakt van scaleen veel rondspelen met de fracties die de elementen innemen.