Border-radius - Q-bitz

Pour cet exercice vous devez recréer un motif à partir de tuiles contenant des formes, comme dans le célèbre jeu de scociété Q-bitz. Cependant, les formes sont actuellement toutes carrées. Vous devrez donc les ajustés en CSS afin de vous permettre d’arriver à vos fins.

Aperçu du résultat 👇

Matériel

Pen de départ

Requis

• Créez une 1re classe vous permettant de faire disparaitre un élément et appliquez là dans le code HTML a toute les formes de tuile devant être invisibles.
• Créez une 2e classe permettant de générer un cercle parfait et attribuez cette classe aux formes des tuiles dans le coin supérieur droit ↗️ et inférieur gauche ↙️.
• Faites de même pour toutes les formes présentes sur le jeu afin de reconstituer le motif fourni en guise d'aperçu ☝️.

Note

Une fois terminé, vous devriez avoir écrit 9 règles CSS, n’ayant toutes qu’une seule propriété, soit border-radius.

Notes de cours

Border
border, border-radius