Shape-outside

L'utilisation de l'attribut permet, à un texte, de suivre les contours d'image(s) placées dans le même cadre.

Mon exemple utilise des formes géométriques, par facilité mais des formes rondes, ovales ou complexes peuvent convenir.

Ici, la même image est utilisée pour le fond transparent et pour les deux côtés.

La forme de ces côtés est définie par clip-path:polygon(); et l'ordre de suivre ces contours par shape-outside:polygon(); qui prennent les mêmes valeurs.

<div style="position: relative; margin: 30px auto; width: 800px; height: 450px; border: 1px solid black; text-align: left;">
<p id="fd">&nbsp;</p>
<p id="gg">&nbsp;</p>
<p id="gd">&nbsp;</p>
<p style="font-size: 20px; text-align: center;">Si haut qu'on monte, on finit toujours pas des cendres.<br />Henri Rochefort<br /> Il vaut mieux se taire et passer pour un con plut&ocirc;t que de parler et de ne laisser aucun doute sur le sujet.<br />Pierre Desproges<br /> La derni&egrave;re fois que j'ai p&eacute;n&eacute;tr&eacute; une femme, c'&eacute;tait en visitant la statue de la Libert&eacute;.<br />Woody Allen<br /> Un bon mari ne se souvient jamais de l'&acirc;ge de sa femme mais de son anniversaire, toujours.<br />Jacques Audiberti<br />Un policier de proximit&eacute; est un policier qui tire &agrave; bout portant.Marc Escayrol</p>
</div>

<style><!--
#fd{position:absolute; z-index:1; width:800px; height:450px; background:url('https://ekladata.com/A5Qqs9AvcCQIT9f72HJXp17ea2s@800x450.jpg'); opacity:0.2;}
#gg{float:left; width:400px; height:450px; background:url('https://ekladata.com/A5Qqs9AvcCQIT9f72HJXp17ea2s@800x450.jpg'); background-position: 0px 0px; shape-outside:polygon(0px 0px, 200px 0px, 100px 150px,100px 300px,200px 450px, 0px 450px); clip-path:polygon(0px 0px, 200px 0px, 100px 150px,100px 300px,200px 450px, 0px 450px);}
#gd{float:right; width:400px; height:450px; background:url('https://ekladata.com/A5Qqs9AvcCQIT9f72HJXp17ea2s@800x450.jpg'); background-position: -400px 0px; shape-outside:polygon(200px 0px, 400px 0px, 400px 450px,200px 450px, 300px 300px, 300px 150px); clip-path:polygon(200px 0px, 400px 0px, 400px 450px, 200px 450px, 300px 300px, 300px 150px);}
--></style>