CSS Battle in 10 minuti: 3 pattern, 3 strategie (e qualche trucco utile anche “fuori gara”)

Perché queste sfide sono utili anche se non ti interessa il punteggio

Le challenge “pixel-perfect” sono una palestra perfetta per chi fa frontend: ti costringono a scomporre un disegno in primitive CSS (rettangoli, cerchi, bordi, ombre), scegliere la strada più breve e gestire i dettagli che spesso in UI reali fanno perdere tempo (centrature, allineamenti, 1px fuori posto).

L’obiettivo qui non è scrivere CSS “bello”, ma scrivere CSS velocemente. E da questa velocità emergono alcune tecniche ricorrenti.

Di seguito trovi tre pattern tipici e come affrontarli con un approccio pragmatico.

---

1) Stack di blocchi centrati + dettaglio verticale: div + pseudo-elemento

Scenario: una composizione con più barre/forme centrate una sotto l’altra, e un dettaglio (es. una striscia verticale) che attraversa una delle forme.

Strategia rapida

1. Imposta subito lo sfondo del body.
2. Crea pochi elementi (anche 3–4 div vanno bene) e usa:
   • margin-inline: auto per centrare orizzontalmente
   • margin-top (o gap su un contenitore) per distanziare verticalmente
3. Per il dettaglio “sovrapposto”, usa un ::after in position: absolute.

Dettagli che fanno risparmiare tempo

• Se un elemento ha un “taglio” o una colonna centrale, spesso è più veloce farlo con un solo pseudo-elemento anziché aggiungere markup.
• Per evitare coordinate “magiche” (es. left: 190px), la versione più pulita e stabile è:
  • position: relative sul blocco principale
  • pseudo-elemento con inset: 0; margin-inline: auto; width: ... (così lo centri senza calcoli)

Mini-template (scheletro)

body{margin:0; background:#...}
.top{position:relative; margin-inline:auto; width:...; height:...; border-radius:...; background:#...}
.top::after{content:""; position:absolute; top:0; bottom:0; width:...; left:50%; transform:translateX(-50%); background:#...}

---

2) Cerchi concentrici + metà coperta: box-shadow + overflow

Scenario: un cerchio con anelli concentrici (o “halo”) e la metà superiore/inferiore mascherata con un colore pieno.

Strategia rapida

• Usa un cerchio interno e genera gli anelli con box-shadow a spread crescente.
• Per la metà coperta, usa:
  • un wrapper con overflow: hidden
  • un ::after assoluto che copre il 50%.

Questa combinazione è spesso più rapida (da scrivere) rispetto a una catena di radial-gradient()… anche se in produzione il gradiente può essere più elegante.

Attenzione a due “trappole” comuni

1. Unità mancanti: alcune proprietà accettano 0 senza unità, ma non accettano numeri “nudi” diversi da zero. In velocità è facilissimo dimenticare px.
2. Virgole finali in box-shadow: una virgola in più può invalidare tutto e farti perdere minuti a inseguire un bug invisibile.

Mini-template

body{margin:0; display:grid; place-items:center; background:#...}
.outer{width:220px; aspect-ratio:1; border-radius:999px; overflow:hidden; position:relative}
.inner{width:80px; height:80px; border-radius:inherit; margin:auto;
  box-shadow:0 0 0 20px #..., 0 0 0 50px #..., 0 0 0 70px #...;}
.outer::after{content:""; position:absolute; top:0; left:0; right:0; height:50%; background:#...}

---

3) Forme “a V” o diagonali: bordi trasparenti + rotazione + tappi circolari

Scenario: una figura che sembra composta da due bande diagonali spesse (tipo “chevron”), con estremità arrotondate.

Strategia rapida (e sorprendentemente potente)

• Parti da un quadrato e usa un bordo spesso trasparente:
  • border: 40px solid transparent;
  • poi dai colore solo ai lati che ti servono: border-top-color e border-bottom-color.
• Ruota il tutto con transform: rotate(...).

Questo trucco permette di ottenere “barre” diagonali senza dover disegnare poligoni o usare gradienti complessi.

Il problema dei “tappi”

Le estremità arrotondate spesso richiedono due cerchi:

• ::before e ::after con border-radius: 999px
• posizionati alle estremità delle bande

Qui la cosa delicata è che la rotazione cambia la percezione delle coordinate: conviene sempre:

• mettere position: relative sull’elemento ruotato
• posizionare i tappi con absolute in coordinate locali (non del body)

Mini-template

.shape{position:relative; width:180px; aspect-ratio:1; border-radius:999px;
  border:40px solid transparent; border-top-color:#...; border-bottom-color:#...;
  transform:rotate(-45deg); background:transparent;}
.shape::before,.shape::after{content:""; position:absolute; width:40px; aspect-ratio:1;
  border-radius:999px; background:#...}
/* posizioni da tarare */
.shape::before{left:...; top:...}
.shape::after{right:...; bottom:...}

---

Due abitudini che migliorano subito le tue “run”

1. Scomponi in 2–3 decisioni, non in 20 micro-passaggi:
   • “È un cerchio con anelli” → box-shadow.
   • “È una metà coperta” → overflow:hidden + pseudo.
   • “Sono bande diagonali” → bordi + rotazione.
2. Evita la caccia al pixel quando sei al 99.9% (se stai facendo una run a tempo): spesso è un antialiasing o un dettaglio da 1px. In contesti reali, piuttosto, si ragiona su robustezza responsive e non sul match perfetto al singolo pixel.

---

In sintesi

• Pseudo-elementi: perfetti per dettagli sovrapposti senza aggiungere markup.
• Box-shadow con spread: un modo rapidissimo per creare cerchi concentrici.
• Bordi colorati su base trasparente + rotazione: trucco “da gara” per diagonali spesse.

Se ti va, dimmi che tipo di figura vuoi replicare (screenshot o descrizione): posso suggerirti la scomposizione e la tecnica CSS più veloce per arrivarci.