Das Erstellen eines einfachen karierten Hintergrunds mit CSS ist unkompliziert. Es kann jedoch eine Herausforderung sein, abgerundete Ecken zu erreichen, ohne auf komplexe CSS -Gradienten zurückzugreifen. Dieser Artikel enth?lt eine kreative L?sung mit einem cleveren Trick mit SVG -Glyphen.

Zun?chst bemühte ich mich, die Ecken eines grundlegenden karierten Musters umzugehen. Dann erinnerte ich mich an die Vielseitigkeit des Bullet Point Glyphe (?) und stellte fest, dass das überlagern an jeder Kreuzung den gewünschten abgerundeten Effekt erzeugen konnte.

Beginnen wir mit dem grundlegenden karierten Muster:

<div></div>

 div {
  Hintergrund: 
    Wiederholungs-Linear-Gradient (
      nach rechts, transparent, 
      transparent 50px, 
      wei? 50px, 
      Wei? 55px
    ),
    Wiederholungs-Linear-Gradient (
      nach unten, transparent,  
      transparent 50px, 
      wei? 50px, 
      Wei? 55px
    ),
    linearer Gradient (45 Grad, Pink, Skyblue);
  / * mehr Stile */
}

Dieser Code generiert ein wiederholtes Muster von Quadraten, das von Pink zu SkyBlue mit 5px -wei?en Lücken übergeht. Die repeating-linear-gradient -Funktion erzeugt horizontale und vertikale wei?e Streifen, die beim Schicht das Schachbrett bilden. Der dritte Gradient liefert die Farbfüllung.

Um die abgerundeten Ecken hinzuzufügen, überlagern wir den Bullet Point -Glyphe mit einem codierten SVG:

 div {
  Hintergrund: 
    Wiederholen Sie links -17px obere -22px/55px 55px
    URL ("Daten: Bild/SVG XML, <svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color: white; font-size: 35px" xmlns="http://www.w3.org/1999/xhtml"> ?</div></foreignobject></svg> "),, 
    Wiederholungs-Linear-Gradient (
      nach rechts, transparent,
      transparent 50px,
      wei? 50px,
      Wei? 55px
    ),
    Wiederholungs-Linear-Gradient (
      nach unten, transparent,
      transparent 50px,
      wei? 50px,
      Wei? 55px
    ),
    linearer Gradient (45 Grad, Pink, Skyblue);
  / * mehr Stil */
}

Das repeat zeigt ein wiederholtes Hintergrundbild an. left -17px top -22px/55px 55px legt die Position und Gr??e jeder Wiederholungseinheit fest, um sich vorsichtig mit den Gitterkritionen auszurichten. Die SVG enth?lt eine HTML<div> Element, das die Glyphe anzeigt; Seine <code>font-size beeinflusst direkt den Eckradius des Quadrats. Der erweiterte SVG sieht so aus:

<svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"><foreignobject height="35px" width="35px"><div style="color:white;font-size:35px" xmlns="http://www.w3.org/1999/xhtml"> ?</div></foreignobject></svg>

Lassen Sie uns schlie?lich einen Schweberffekt hinzufügen:

 Div: Hover {
  Hintergrund:
    Wiederholungs-Linear-Gradient (
      nach rechts, transparent,
      transparent 50px,
      RGB (255 255 255 / 0,5) 50px,
      RGB (255 255 255 / 0,5) 55px
    ),
    Wiederholungs-Linear-Gradient (
      nach unten, transparent,
      transparent 50px,
      RGB (255 255 255 / 0,5) 50px,
      RGB (255 255 255 / 0,5) 55px
    ),
    linearer Gradient (45 Grad, Pink, Skyblue);
  Box-Shadow: 10px 10px 20px Pink;
}

Dadurch wird die Glyphe des Schwebers entfernt und macht die wei?en Linien mithilfe von rgb() mit Alpha-Transparenz halbtransparent. Ein box-shadow fügt einen subtilen Effekt hinzu.

Diese Technik bietet einen kreativen und effektiven Weg, um ein Schachbrettmuster mit abgerundetem Ecker mit CSS zu erreichen, was Flexibilit?t für verschiedene interaktive Stile bietet. Ich begrü?e alternative Ans?tze in den Kommentaren!