• Exemple 77

    Dans mes recherches sur le net et sur l'attribut clip-path, je trouve une explication sur ce qu'on fait dans les traitement de texte, à savoir que le texte prend la forme de l'image.

    J'ai voulu faire un essai: le voilà:

    Un ministre épouse une femme qui a déjà été mariée dix fois.
    Pendant leur nuit de noce, elle lui glisse à l’oreille :
    "Sois doux avec moi, je suis toujours vierge…"
    "Comment c’est possible , demande le ministre, tu as déjà été mariée dix fois ? "
    Eh bien, mon premier mari était responsable des ventes, il passait son temps à me dire à quel point ça allait être super.
    Le second s’occupait d’un SAV. Il me disait toujours qu’il ne savait pas bien comment ça fonctionnait mais qu’il allait jeter un coup d’oeil et qu’il me tiendrait au courant.
    Le troisième était informaticien. Il faisait des diagnostics mais ne pouvait pas traiter le problème.
    Le quatrième faisait de la vente par correspondance et même en ayant la commande il ne pouvait pas me donner de date de livraison.
    Le cinquième était ingénieur. Il comprenait bien le processus mais demandait trois ans de recherches supplémentaires et voulait revoir le design avant de se lancer.
    Le sixième était dans l’administration. Il connaissait bien le problème mais se demandait toujours si c’était son boulot ou pas.
    Le septième était dans le marketing. Bien qu’il trouve qu’il avait un super produit, il ne savait jamais comment le positionner.
    Le huitième était psy. Tout ce qu’il faisait c’était d’en parler, d’en parler, d’en parler…
    Le neuvième était gyneco. Il passait son temps à regarder, jamais plus.
    Le dixième collectionnait les timbres. Il ne se servait que de sa langue.
    Enfin, maintenant que je suis mariée à un ministre je suis vraiment excitée!
    "Mince , dit le ministre, mais pourquoi tu es excitée ?"
    " Tu es un homme politique, je suis sûre que tu vas vraiment bien me baiser!! "


    L'attribut pour cette présentation est shape-outside


    <div style="width: 80vw; height: 45vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: linear-gradient(to right, #f6e6b4 0%,#ed9017 100%);">
    <p id="ment1"><img id="ment" src="http://ekladata.com/J9nKEV2SmCWp_iqh_GBaMkO01U8.jpg" alt="" />Votre texte, assez long pour faire toute la hauteur de votre cadre.</p>
    </div>
    <style><!--
    #ment{float:left; width:25.3vw; height:45vw;clip-path: circle(70% at 0% 50%);shape-outside: circle(70% at 0% 50%) border-box;}
    #ment1{float:left; width:80vw; height:45vw; text-align:left; font-size:1.15vw; shape-outside:url('http://ekladata.com/J9nKEV2SmCWp_iqh_GBaMkO01U8.jpg') border-box; }
    --></style>


    Si vous voulez que l'image soit à droite et le texte à gauche:

    <div style="width: 80vw; height: 45vw; margin: 1vh auto; text-align: left; border: 0.1vh solid black; background: linear-gradient(to right, #f6e6b4 0%,#ed9017 100%);">
    <p id="ment1"><img id="ment" src="http://ekladata.com/J9nKEV2SmCWp_iqh_GBaMkO01U8.jpg" alt="" />Votre texte, assez long pour faire toute la hauteur de votre cadre.</p>
    </div>
    <style><!--
    #ment{float:right; width:25.3vw; height:45vw;clip-path: circle(70% at 100% 50%);shape-outside: circle(70% at 100% 50%) border-box;}
    #ment1{float:right; width:80vw; height:45vw; text-align:left; font-size:1.15vw; shape-outside:url('http://ekladata.com/J9nKEV2SmCWp_iqh_GBaMkO01U8.jpg') border-box; }
    --></style>