La propriété shape-outside

Nous venons de voir la propriété clip-path qui permet de découper une image.
Voyons maintenant le pendant de celle-ci : la propriété shape-outside
En effet si, par exemple, une image est découpée tel un cercle il est logique que le texte accolé, contourne de façon circulaire l'image.

Exemple

Observez les trois paragraphes ci-dessous !
Admirez comme le texte s'écoule proprement autour de l'image découpée : le texte contourne l'image tel un demi-cercle ou une demi-ellipse, etc.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

Dein Syria per speciosam interpatet diffusa planitiem. hanc nobilitat Antiochia, mundo cognita civitas, cui non certaverit alia advecticiis ita adfluere copiis et internis, et Laodicia et Apamia itidemque Seleucia iam inde a primis auspiciis florentissimae. Vide, quantum, inquam, fallare, Torquate. oratio me istius philosophi non offendit; nam et complectitur verbis, quod vult, et dicit plane, quod intellegam; et tamen ego a philosopho, si afferat eloquentiam, non asperner, si non habeat, non admodum flagitem. re mihi non aeque satisfacit, et quidem locis pluribus. sed quot homines, tot sententiae; falli igitur possumus. Et quia Mesopotamiae tractus omnes crebro inquietari sueti praetenturis et stationibus servabantur agrariis, laevorsum flexo itinere Osdroenae subsederat extimas partes, novum parumque aliquando temptatum commentum adgressus. quod si impetrasset, fulminis modo cuncta vastarat. erat autem quod cogitabat huius modi.

Le code correspondant

Le CSS

	section {width : 90% ; margin : 10px auto 10px auto ; border : 1px solid red; }
	.image1 {float : left ; width : 20%; clip-path : circle(50% at center center) ; margin : 10px; 
		shape-outside : circle(50% at center center); }
	.image2 {float : left ; width : 20%; clip-path : ellipse(40% 50% at 50% 50%) ; margin : 10px; 
			shape-outside : ellipse(40% 50% at 50% 50%); }
	.image3 {float : left ; width : 20%; clip-path : polygon(0 100%, 10% 0, 90% 0, 100% 100%) ; margin : 10px; 
			shape-outside : polygon(0 100%, 10% 0, 90% 0, 100% 100%); }
	.texte p {font-size : 18px; text-align : justifiy; padding: 5px; }

Pour chaque classe relative aux images notez l'emploi combiné des propriétés clip-path & shape-outside avec la même valeur. .
Il faut donc appliquer ces deux propriété à l'élément IMG !
L'image découpée flotte à gauche dans le conteneur SECTION.

Le code HTML

<section> <img src ="../images/bikini6.jpg" class ="image1"> <div class ="texte"><p>Dein Syria per speciosam interpatet diffusa planitiem ... </div> </section> <section> <img src ="../images/bikini2.jpg" class ="image2"> <div class ="texte"><p>Dein Syria per speciosam interpatet diffusa planitiem ... </div> </section> <section> <img src ="../images/bikini8.jpg" class ="image3"> <div class ="texte"><p>Dein Syria per speciosam interpatet diffusa planitiem ... </div> </section>

Aucune difficulté !
Chaque conteneur SECTION contient un élément IMG et un élément DIV.
A chaque image est associée une classe qui gère le flottement, le découpage de l'image et du texte accolé.
A chaque DIV est associé la classe "texte". Retour menu