Bloc texte forme rectangle déformé

Bonjour tout le monde,

Je cherche à faire ce type de rectangle (un point d'angle du rectangle est plus loin ou moins loin que son frère du dessus), mais je ne suis pas certain de la meilleure technique pour la réaliser : polygon ou svg ou tricher avec peut-être deux formes, un triangle et un rectangle.

J'ai besoin que cette forme s'adapte à la taille du texte en cas il change, et aussi à cause du responsive.

Bonjour,

Pas sûr d'avoir tout compris, mais - en admettant que j'ai réussi à effleurer l'idée - vous pouvez utiliser la propriété CSS clip-path : https://developer.mozilla.org/fr/docs/Web/CSS/clip-path

Exemple :

clip-path: polygon(25% 20%, 48% 0, 75% 20%, 100% 20%, 100% 100%, 0 100%, 0 20%);

Vous pouvez même définir directement votre chemin à la manière d'un path SVG :

clip-path: path('M 0 200 L 0,75 A 5,5 0,0,1 150,75 L 200 200 z');

Voici un générateur de code pour aider : https://bennettfeely.com/clippy/
Modifié par Olivier C (17 Jan 2025 - 20:50)