CSS Formes d'Image
Avec CSS, il est facile de donner des formes (rognage) aux images, comme des cercles, des ellipses et des polygones.
Propriété CSS clip-path et fonction circle()
La propriété clip-path permet de rogner un élément à une forme de base.
La fonction circle() définit un cercle avec un rayon et une position.
Ici, nous rognons une image en un cercle avec un rayon de 50 % :
Exemple
Rogner une image en un cercle avec un rayon de 50 % :
img {
clip-path: circle(50%);
} Nous pouvons également spécifier le centre du cercle. Cela peut être une valeur de longueur ou de pourcentage, ou encore une valeur telle que gauche, droite, haut ou bas. La valeur par défaut est le centre.
Ici, nous rognons une image en un cercle avec un rayon de 50 % et positionnons le centre du cercle à droite :
Exemple
Rogner une image en un cercle avec un rayon de 50 % et positionner le centre du cercle à droite :
img {
clip-path: circle(50% at right);
} CSS shape-outside et circle()
La propriété shape-outside permet de définir une forme pour l'enveloppement du contenu en ligne.
La fonction circle() définit un cercle avec un rayon et une position.
Ici, nous rognons une image en un cercle avec un rayon de 40 %, et définissons le shape-outside à un cercle avec un rayon de 45 % (pour façonner le texte) :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Exemple
Utilisation de circle(), clip-path et shape-outside :
img {
float: left;
clip-path: circle(40%);
shape-outside: circle(45%);
} CSS clip-path et ellipse()
La propriété clip-path permet de rogner un élément à une forme de base.
La fonction ellipse() définit une ellipse avec deux rayons x et y.
Ici, nous rognons une image en une ellipse avec un rayon de 50 % pour x et un rayon de 35 % pour y :
Exemple
Rogner une image en une ellipse avec un rayon de 50 % pour x et un rayon de 35 % pour y :
img {
clip-path: ellipse(50% 35%);
} Nous pouvons également spécifier le centre de l'ellipse. Cela peut être une valeur de longueur ou de pourcentage, ou encore une valeur telle que gauche, droite, haut ou bas. La valeur par défaut est le centre.
Ici, nous rognons une image en une ellipse avec un rayon de 50 % pour x et un rayon de 35 % pour y, et positionnons le centre de l'ellipse à droite :
Exemple
Rogner une image en une ellipse avec un rayon de 50 % pour x et un rayon de 35 % pour y, et positionner le centre de l'ellipse à droite :
img {
clip-path: ellipse(50% 35% at right);
} CSS shape-outside et ellipse()
Ici, nous rognons une image en une ellipse avec un rayon de 40 % pour x et un rayon de 50 % pour y, et définissons le shape-outside à une ellipse avec un rayon de 45 % pour x et un rayon de 50 % pour y (pour façonner le texte) :
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ac laoreet quam, id aliquet nisl. Etiam id eros ligula. Aenean euismod, enim sed mollis feugiat, magna massa cursus leo, ut maximus metus eros non ante. Praesent eget tincidunt mauris, ut euismod ipsum. In hac habitasse platea dictumst. In dapibus tortor magna, elementum elementum neque sagittis id. Integer vestibulum semper dui, quis finibus libero elementum nec. Fusce ultricies lectus a eros interdum, efficitur iaculis nibh varius. Praesent sed ex bibendum, fermentum tortor nec, tincidunt augue. Maecenas in lobortis ligula, at viverra velit. Donec facilisis blandit purus sed efficitur. Duis est augue, bibendum quis bibendum sed, feugiat vel eros. Quisque ut nisi sed erat malesuada euismod. Aliquam feugiat erat eget sodales imperdiet. Ut vel tortor auctor, rutrum lectus a, tempor nunc. Vivamus nec elit ornare, dictum urna sollicitudin, ornare diam. Nullam dictum arcu vitae odio ultrices iaculis.
Exemple
Utilisation de ellipse(), clip-path et shape-outside :
img {
float: left;
clip-path: ellipse(40% 50%);
shape-outside: ellipse(45% 50%);
} Fonction CSS polygon()
La fonction polygon() définit un polygone.
Cette fonction contient des points qui définissent le polygone. Cela peut être une valeur de longueur ou de pourcentage. Chaque point est une paire de coordonnées x et y. 0 0 définit le coin supérieur gauche et 100 % 100 % définit le coin inférieur droit.
La fonction polygon() est utilisée dans la propriété clip-path et la propriété shape-outside .
Ici, nous rognons une image en un polygone :
Exemple
Rogner une image en un polygone :
img {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
} Propriétés et Fonctions CSS
Le tableau suivant répertorie les propriétés et fonctions CSS utilisées dans ce chapitre :
| Propriété/Fonction | Description |
|---|---|
| clip-path | Permet de rogner un élément à une forme de base ou à une source SVG |
| shape-outside | Permet de définir une forme pour l'enveloppement du contenu en ligne |
| circle() | Définit un cercle avec un rayon et une position |
| ellipse() | Définit une ellipse avec deux rayons x et y |
| polygon() | Définit un polygone |