CSS per creare contenitori obliqui o con forme geometriche complesse.
SVG, clip-path, transform skew, border radius, sono le tecniche CSS usate per creare splendide intestazioni non rettangolari in un file HTML, qual è la migliore?

Html e css
Autore:

Chi come me progetta pagine web arriva sempre al punto in cui deve trovare il modo di collimare la necessità di evidenziare alcuni specifici messaggi all’interno di una certa quantità di contenuto. È un passaggio obbligatorio che serve a guidare il nostro lettore in un percorso di conversione o di interesse semplificato fra gli approfondimenti e i testi studiati per indicizzare nel miglior modo la nostra pagina.

Quando per farlo si vuole uscire dalla solita logica di neretti, elenchi puntati e dimensione dei caratteri si può intervenire direttamente sul contenitore di un’intestazione o di un messaggio importante. In due modi, attraverso il colore o l’immagine di sfondo e attraverso forma. In questo articolo approfondiremo questo secondo aspetto, così da creare splendidi contenitori non rettangolari. Come? Grazie ai CSS. Vediamo come.

Le tecniche che userò per realizzare contenitori non rettangolari sono le seguenti:

  1. Svg (disegno)

  2. Clip-Path (ritaglio)

  3. Transform Skew (inclino)

  4. Border-Radius (arrotondo)


1) SVG, per disegnare il contenitore con una forma vettoriale:


La forma del contenitore è svincolata da quella dei vertici del DIV che la contiene.
PRO: Il contenitore può avere qualsiasi numero di vertici e qualsiasi forma;
CONTRO: Può essere necessario un programma per il disegno vettoriale.




2) CLIP-PATH, per ricavare un’area di ritaglio interna al contenitore:


La forma del contenitore si ottiene intervenendo sui 4 vertici del contenitore.
PRO: È molto semplice realizzarci evoluzioni di forme rettangolari o circolari;
CONTRO: Non è compatibile con tutti i browser.




3) STRANSFORM SKEW, per trasformare il contenitore inclinandolo rispetto un punto:


La forma del contenitore si ottiene dall’intersezione del contenitore di partenza con quello trasformato.
PRO: Ci si possono realizzare facilmente contenitori trapezoidali compatibili con tutti i browser;
CONTRO: È poco intuibile se si vogliono realizzare forme complesse.




4) BORDER-RADIUS, per ottenere una forma arrotondando i vertici del contenitore:


La forma del contenitore si ottiene arrotondando i suoi vertici.
PRO: È il metodo più semplice e intuibile;
CONTRO: Ci si possono creare pochissime forme.



Qual'è la tecnica migliore?

Con gli SVG è possibile disegnare splendidi contenitori con un numero illimitatao di vertici e smussi, sono compatibili con qualsiasi browser e facili da rendere responsive. Per questo a mio avviso è la tecnica migliore. Tuttavia, se il blocco successivo alla tua intestazione non ortogonale ha uno sfondo complesso questa tecnica potrebbe causare dei problemi. In questo caso potrebbe essere consigliabile sperimentare gli altri modi.
Fate le vostre prove e buon lavoro!

I più visti

Font-size CSS per una tipografia fluida e responsive.

px – em – rem – vw – vh – vmin – emax: la guida alle unità di misura dei font, per capirne le differenze, come e quando utilizzarle

Usare i CSS per creare splendidi effetti di sovrapposizione di testi, immagini e colori

Ovvero come realizzare le dissolvenze e i mascheramenti tipici dei programmi più avanzati di fotoritocco con gli attributi CSS Mix-blend-mode e background-clip: text

Come realizzare uno schema colori professionale per un sito web.

Ovvero adatto al prodotto/servizio di cui si occupa la tua interfaccia, accessibile a tutti e in grado di condizionare le conversioni e le scelte dei tuoi utenti

Automatizzare combinazioni di colori armoniose sul tuo sito web con LESS

Ovvero come passare dalla teoria del colore alla pratica della programmazione di un sistema di colori generato da un colore primario

Centrare un DIV dentro un altro DIV

5 metodi per centrare un DIV in orizzontale e in verticale in una pagina HTML con gli stili CSS, o all’interno di una pagina reattiva bootstrap