CSS Checkerboard Background ... mais avec des coins arrondis et des styles de survol

Création d'un simple dossier vérifié avec CSS est directement. Cependant, la réalisation de coins arrondis sans recourir à des gradients CSS complexes peut être difficile. Cet article présente une solution créative en utilisant une astuce intelligente avec les glyphes SVG.

Au début, j'ai eu du mal à arrondir les coins d'un motif à carreaux de base. Ensuite, je me suis souvenu de la polyvalence du glyphe du point de puces (✦) et j'ai réalisé que la superposition sur chaque intersection pourrait créer l'effet arrondier souhaité.

Commençons par le modèle à carreaux fondamental:

 <div> </div> 55px), repensant linéaire-gradient (en bas, transparent, transparent 50px, blanc 50px, blanc 55px), gradient linéaire (45 degrés, rose, skyblue); / * Plus de styles * /} 

Ce code génère un motif répétitif de carrés, en transition du rose à SkyBlue, avec des lacunes blanches 5px. La fonction répétitive linéaire crée des rayures blanches horizontales et verticales qui, lorsqu'elles sont en couches, forment le damier. Le troisième gradient fournit le remplissage des couleurs.

Pour ajouter les coins arrondis, nous superposons le glyphe du point de puces en utilisant un SVG codé:

 Div {Background: Repenez URL gauche -17px-top -22px / 55px 55px URL ("Data: image / svg xml, <svg viewbox="'0" xmlns="'http:"> <fit renvoi de hauteur="'35px'" width="'35px'"> <div   style="max-width:90%" white xmlns="'http:"> ✦ </div>  </fit></svg> "), repenting-linear-gradient (à droite, transparent, transparent 50px, blanc 50px, transparent, 50px blanc-linéaire ( 50px, blanc 55px), gradient linéaire (45 degrés, rose, skyblue); / * Plus de style * /}  pre> <p> Le mot-clé <code> répéter </code> indique une image d'arrière-plan répétitive. <code> Left -17px supérieur -22px / 55px 55px </code> définit la position et la taille de chaque unité de répétition, soigneusement décalée pour s'aligner avec les intersections de la grille. Le SVG contient un élément HTML <code> <div>  affichant le glyphe; Son <code> Font-Size </code> influence directement le rayon d'angle du carré. Le svg élargi ressemble à ceci:  <pre class="brush:php;toolbar:false"> <svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"> <forestobject height="35px" width="35px"> <div style="colori: blanc; font-size: 35px" xmlns="http://www.w3.org/1999/xhtml"> ✦ </div>   </forestobject></svg>

Enfin, ajoutons un effet Hover:

 divisant: hover {background: REPETING-LINEAR-GRADEDEND / 0,5) 50px, RVB (255 255 255 / 0,5) 55px), repensant linéaire-gradient (en bas, transparent, transparent 50px, RVB (255 255 255 / 0,5) 50px, RVB (255 255 255 / 0,5) 55px), linéaire (45Deg, rose, SkyBlue); Box-shadow: 10px 10px 20px rose; } 

Ceci supprime le glyphe sur le plan de survol et rend les lignes blanches semi-transparentes à l'aide de rgb () avec la transparence alpha. Un box-shadow ajoute un effet subtil.

Cette technique offre un moyen créatif et efficace d'obtenir un motif de damier au ccorner arrondi avec CSS, offrant une flexibilité pour divers styles interactifs. J'accueille des approches alternatives dans les commentaires!