CSS -Schachbretthintergrund ... aber mit abgerundeten Ecken und Schwebstilen

>

Erstellen von einfachen Koks mit CSS mit CSS. 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. Dann erinnerte ich mich an die Vielseitigkeit des Bullet Point-Glyphs (✦) und stellte fest, dass das Überlagern an jedem Schnittpunkt den gewünschten abgerundeten Effekt erzeugen könnte. 55px), wiederholt-linear-Gradient (bis unten, transparent, transparent 50px, weiß 50px, weiß 55px), linear Gradient (45 Grad, Pink, Skyblue); / * Weitere Stile */}

Dieser Code generiert ein wiederholendes Muster von Quadraten, der von Pink zu Skyblue mit 5px -weißen Lücken übergeht. Die wiederholende lineare Gradient erstellt 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: Image/svg xml, <svg viewbox xmlns="'http:"> <fremdobject height="'35px'" width="'35px'"> <div style="'color:" wei xmlns="'http://www.w3.org/1999/xhtml'">✦</div></fremdobject></svg>"), repeating-linear-gradient( to right, transparent, transparent 50px, white 50px, white 55px ), repeating-linear-gradient( to bottom, transparent, transparent 50px, white 50px, weiß 55px), linearer Gradient (45 Grad, Pink, Skyblue); / * Mehr Stil */} 

Das Schlüsselwort Wiederholung zeigt ein wiederholtes Hintergrundbild an. links -17px obere -22px/55px 55px Legt die Position und Größe jeder Wiederholungseinheit vor, um sich vorsichtig mit den Gitterkritionen auszurichten. Das SVG enthält ein HTML <div> Element, das die Glyphe anzeigt; Sein <code> Schriftgröße beeinflusst direkt den Eckradius des Quadrats. Der erweiterte SVG sieht folgendermaßen aus:

 <svg viewbox="0 0 35px 35px" xmlns="http://www.w3.org/2000/svg"> <fremdobject height="35px" widthth="35px"> <div-style fonont-size:> <div. xmlns="http://www.w3.org/1999/xhtml">✦</div.></div-style></fremdobject></svg>