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.
Modifié par blond1n (18 Jan 2025 - 10:14)

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)

Bonjour,
Je connaissais le générateur de code.

J'ai chargé mon image pour plus de compréhension. Mes rectangles déformés sont des polygones qui encadreront un texte, voir une image mais je pense utiliser directement des images à la bonne forme.

Ces polygones pourraient être fait avec un rectangle et un triangle mais je ne sais pas ce qui est de mieux pour le côté responsive, l’accessibilité et la flexibilité de ces blocs.

Bonjour,

Il y a ceci qui peut-être une piste pour arrondir les angles : https://css-tricks.com/gooey-effect/
et https://css-tricks.com/shape-blobbing-css/

Un exemple possible pour t'inspirer https://codepen.io/gc-nomade/pen/QwLBqdP

Arrondis régler depuis ce SVG , valeurs de stdDeviation et les deux dernières de values (feColorMatrix) à modifiées à ta convenance:

<svg style="visibility: hidden; position: absolute;" width="0" height="0" xmlns="http://www.w3.org/2000/svg" version="1.1">
  <defs>
    <filter id="roundedCorners">
      <feGaussianBlur in="SourceGraphic" stdDeviation="10" result="blur" />
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 12 -7" result="roundedCorners" />
      <feComposite in="SourceGraphic" in2="roundedCorners" operator="atop" />
    </filter>
  </defs>
</svg>

Merci pour la réponse ! Je vais explorer tout ça. J'avoue tout n'était pas clair entre le html et le css mais en lisant et creusant un peu, je devrais m'en sortir pour comprendre et l'appliquer. Je reposte un commentaire dès que j'ai avancé dessus.

Salut,

vu la forme de tes rectangles, je regarderai plutôt du côté des perspectives et des rotations, en mettant tes rectangles en fond via un pseudo element. Faire des clip path avec des radius ça va être compliqué.

Un peu comme une flip card mais figé

Pedrothelion a écrit :
Salut,
Faire des clip path avec des radius ça va être compliqué.

pas tant que ça, il y a une bonne dizaine d'année que c'est possible et aujourd'hui la majorité des navigateurs s'en sortent très bien un des premiers exemple connu https://tympanus.net/codrops/2015/03/10/creative-gooey-effects/
mon codepen passe même sur mon mobile et on peut y adjoindre des ombrages.

cdt