Bloc texte forme rectangle déformé

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

Bonjour,

Je n'ai pas eu le temps de poser mes fesses devant le pc depuis plus d'une semaine.

Mes rectangles ne sont pas vraiment des rectangles mais des polygones, j'ai un angle qui est soit plus court ou plus long que son frère plus haut. Du coup, les perspectives ou autres déformations ne vont pas coller au design.

Je n'ai pas encore eu le temps de tester la manière de gcyrillus. Je croise les doigts pour que je m'en sorte pour adapter ça à du WP et le responsive.

Salutations,

blond1n a écrit :
Bonjour,

Je n'ai pas eu le temps de poser mes fesses devant le pc depuis plus d'une semaine.

Mes rectangles ne sont pas vraiment des rectangles mais des polygones, j'ai un angle qui est soit plus court ou plus long que son frère plus haut. Du coup, les perspectives ou autres déformations ne vont pas coller au design.

Je n'ai pas encore eu le temps de tester la manière de gcyrillus. Je croise les doigts pour que je m'en sorte pour adapter ça à du WP et le responsive.

Salutations,

Bon alors on va essayer de "découper" les étapes et commencer par te rassurer et voir à quoi sert et comment régler le SVG qui sert de filtre.

Voici un autre codepen qui va permettre de visualiser l'effet du filtre et l'effet de réglages sur trois de ses valeurs: https://codepen.io/gc-nomade/pen/jENQXNb

Une fois rassurer et que tu as trouver le bon réglage pour la taille des arrondis, il est temps de garder ce SVG de coté et la règle pour l'appliquer à un (ou plusieurs éléments)

filter:url(#roundedCorners);

Les exemples en dessous ne sont pas à analyser , il ne servent uniquement qu'a visualiser d'autres formes et l'aspect des arrondis aux angles.

A partir de ce moment, les arrondis sont à mettre de coté et il est temps de passer aux autres étapes en les finalisant une à une pour eviter toutes confusions.

1) créer la mise en forme des différentes zones de textes avec la structure HTML adéquate et la méthode CSS qu'il te convient (flex, grid, ...).

2) faire les tests "responsive" comme tu l'entend et finaliser les réglages

3) découper les formes avec clip-path et user de padding pour repousser les contenus dans les zones visibles en appliquant une couleur de fond à ces zones.

4) Ajouter le svg dans le document et le filtre dans la feuille de style en ciblant avec le sélecteur de l'une de ces zones ou le parent direct, qui aura pour effet d'arrondir les angles convexes et concaves.

A chaque étape, le forum reste ouvert et il sera surement plus efficace et constructif de t'aider au fil des étapes, la dernière n'étant pas la plus complexe à mettre en place

Cdt
Modifié par gcyrillus (25 Jan 2025 - 22:47)

Merci pour cette nouvelle réponse !!
Je vais essayer ce weekend (encore pas beaucoup de temps) de comprendre la manière dont je dois faire pour faire mes formes.
Je reposte dès que j'ai avancé.