Mise en forme d'une zone de texte avec une forme particulière

bonjour !

Je seiche sur un problème et je ne voit pas comment le résoudre !

J'aimerai avoir un carré (ou un rectangle) avec dans chaque coin ce celui-ci un ornement.
À l'intérieur du texte qui sera centré et qui va aussi éviter les ornements ....
j'ai fait un petit schéma pour mieux vous illustrer :



la zone bleu est celle du texte.
Savez-vous si cela est possible ??

Merci d'avance pour vos réponses !
Modifié par eddytournier (13 Dec 2014 - 17:34)

Bonjour,

Je pencherais pour mettre l'ornement en guise de bordure ; ce qui me paraît le plus pratique.

Ou alors en background avec un padding supérieur/égal à la largeur/hauteur des ornements.

oui biensur c'est ta solution avec le padding que je préconise.
mais s'il y a une solution qui se rapproche de la proposition du graphiste c'est mieux

pour les ornements j'ai opté pour pour des <div> en position absolute
(mon carrée a déjà des style pour ses bordure )

<div id="warpper">
    <div class="carre">
       
            <div  class="contenu">

                 <h1>ici mon contenu</h1>
                
                 <p>blabla blabla blabla blabla blabla blabla</p>

            </div>



        <div class="ornement">
           <div class="hautgauche"></div>
           <div class="hautdroite"></div>
           <div class="basgauche"></div>
           <div class="basdroite"></div>
        </div>

    </div>
</div>

Modifié par eddytournier (15 Dec 2014 - 10:50)

version en ligne avec le texte centré
http://jsfiddle.net/Zedd/cp0k39hk/4/
Modifié par eddytournier (15 Dec 2014 - 12:22)

Bonsoir,

tu pouvait aussi rester dans le flux avec du display et garder un conteneur fluide , carré par défaut , mais qui accepterais de s’étendre en hauteur : http://codepen.io/anon/pen/OPNGOx