Utiliser la propriété shape outside en css

Comment utiliser la propriété shape outside

Si l’on se réfère à la page référence, « La propriété shape-outside définit une forme (qui peut ne pas être un rectangle) autour de laquelle le contenu en ligne devra « s’écouler ». Cette propriété permet donc de contourner un élément en épousant sa forme. On peut utiliser une valeur avec un mot clé

shape-outside: none;
shape-outside: margin-box;
shape-outside: content-box;
shape-outside: border-box;
shape-outside: padding-box;

Une valeur utilisant une fonction :

/* Valeurs utilisant une fonction */
shape-outside: circle();
shape-outside: ellipse();
shape-outside: inset(10px 10px 10px 10px);
shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);
shape-outside: linear-gradient(45deg, rgba(255,255,255,0) 150px, red 150px);

Une valeur de type url :

/* Valeur de type <url> */
shape-outside: url(image.png);

Ou enfin une valeur du type gradient :

/* Valeur de type <gradient> */
shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);

Mise en forme et pratique

L’utilisation de cette propriété n’est pas forcément simple. Ca l’est si l’on utilise une structure vraiment basique, comme suggéré sur la page css trick.

.element {  
  float: left;
  shape-outside: circle(50%);
  width: 200px;
  height: 200px;
}

Voici un exemple d’application :

Le principe est ici assez simple :

On prend une image. A l’origine celle-ci est carrée et fait 200px sur 200px. Je lui applique un border radius de 50% pour lui donner une apparence de cercle.

A la suite je place du texte dans une balise paragraphe.

J’applique un float à l’image, et la propriété shape-outside: circle(50%); Sans le border-radius, vous n’obtiendrez pas l’effet de contour. Le texte sera accolé à l’image. Grâce au border-radius, l’image apparaît arrondie et l’effet du shape-outside est nettement visible.

Utiliser shape-outside en imbriquant les éléments

Dans le deuxième exemple, on utilise le même principe, sauf que l’image est à l’intérieur d’une div, ainsi que le texte. Rien ne change ici, on cible également l’image et on applique le même css. L’effet fonctionne aussi. La difficulté survient lorsqu’on essaye d’utiliser cette propriété avec une mise en page en flex-box. L’effet ne marche plus et il faut donc bien réfléchir à la structure de ses blocs pour l’utiliser;

Utilisation avancée de la propriété shape-outside

Consultez ces deux références pour en savoir plus

css-trick et chromaticq