Quante volte ci siamo chiesti come poter allineare il testo di un paragrafo alla forma di un’immagine proprio come accade nelle riviste?
Couchfort.net presenta un metodo molto efficace e semplice per risolvere il problema.

Il trucco è molto semplice e ve lo mostro immediatamente.
Inserite nel markup una serie di elementi <span>, tanti quanti ne basteranno per riempire “l’immagine”; Poi, per finire, diamo una classe unica a tutti questi elementi, ad esempio .curva, ed un’id univoco magari seguito da un numero seriale, ad esempio id=”curva1″.

A questo punto ci pensa il nostro CSS a sistemare tutto con delle semplici e veloci regole, vediamole:

La classe unica è così composta:

.curva {
	float: left;
	display: block;
	height: 16px;
	clear: left;
   }

Queste regole fanno si che gli elementi stiano sempre a sinistra (float: left;), uno sotto l’altro (clear: left;) e siano alti 16px (height: 16px;).
Poi andremo a sistemare ogni singolo elemento in modo da creare la forma:

   #curva1 { width: 230px; }
   #curva2 { width: 225px; }
   #curva3 { width: 220px; }
   #curva4 { width: 215px; }
   #curva5 { width: 210px; }

Il risultato lo potete vedere qui.

Adesso non rimane altro che dare sfogo alla propria fantasia!