Tableau géométrique

Bonjour,

Créer des formes géométriques en CSS n'est pas difficile. Mais, je souhaite créer des tableaux (ou DIVs) géométriques.
Je ne parle pas des bordures. Je parle des tableaux (ou DIVs) eux-mêmes dans lesquels on peut écrire un texte, exactement comme des tableaux et DIVs normaux!

Par exemple:
Largeur: 100%
Hauteur: auto
Ovale ou polygonal
Une ligne, une colonne (si c'est un tableau)
Bordure: 0
Arrière-plan: noire

Merci par avance.
Bien cordialement,

Hello,

Je ne suis pas sûr de comprendre ta demande, notamment le rapport avec des tableaux.

Tu as besoin de données qui s'affichent dans une forme définie, c'est ça ? Ce serait le job de `clip-path` a priori.

Par contre, par définition, un élément HTML quel qu'il soit occupera de toute façon une surface sous forme de rectangle, c'est le principe même du Modèle de boîte en HTML/CSS.

Salut,

Surtout que le HTML n'est pas fait pour ça à la base. Faire des formes géométriques avec du HTML, c'est du hack¹. Tu souhaites créer des formes géométriques ? Le SVG²³ est prévu pour ça.

- oval
- polygone

____
¹ détournement de l'utilisation principale
² SVG essential
³ w3 school SVG
Modifié par niuxe (17 Dec 2024 - 12:13)

Il y a peut-être quelque chose avec shape-outside et float

exemple avec des cercles : https://codepen.io/gc-nomade/pen/vwqKyR (utilise plusieurs pseudo en float pour délimiter les zones)

Voir https://developer.mozilla.org/fr/docs/Web/CSS/shape-outside pour créer les formes utiles.
et https://bennettfeely.com/clippy/

Cdt
Modifié par gcyrillus (17 Dec 2024 - 13:22)

Bonjour,

Raphael

a écrit :
"Tu as besoin de données qui s'affichent dans une forme définie, c'est ça ?"

Oui, j'ai besoin des formes géométriques pour écrire des textes assez courts (en deux à cinq lignes) qui s'affichent exactement dans les formes.

Niuxe

a écrit :
"Faire des formes géométriques avec du HTML, c'est du hack."

Je ne suis pas quand même un hacker!

Gcyrillus

a écrit :
"exemple avec des cercles…"

J'ai essayé cette solution qui semble intéressante. Mais, mon logiciel (Microsoft Expression Web 4) considère les éléments "shape-outside", "grid-template-columns", "display: grid", comme non conformes.

Merci encore une fois.
Bien cordialement,

Bonjour,

AM250 a écrit :
Mais, mon logiciel (Microsoft Expression Web 4) considère les éléments "shape-outside", "grid-template-columns", "display: grid", comme non conformes.

Microsoft Expression Web 4 n'est plus mis à jour depuis 2012, une éternité en ce qui concerne le développement web.

La première chose à faire, c'est de changer d'outil de développement, parce que d'une part continuer à développer avec Microsoft Expression Web 4 est un moyen assez sûr de faire des pages web marchant assez mal en 2024, et d'autre part c'est peu évident de savoir ce que "faisait" cet outil quand on ne l'a pas, rendant difficile de proposer une solution dont cet outil voudrait bien.

Pour ce qui est de ton problème, je pense comme Raphael et Gcyrillus que les propriétés css clip-path et shape-outside pourraient être appropriées.

- un exemple avec une combinaison des deux : https://jsfiddle.net/parsimonhi/c4d2z395/
- un sujet similaire : https://forum.alsacreations.com/topic-4-87694-1-Resolu-Header-svg-Y.html

Amicalement,

Salut,

a écrit :
Je ne suis pas quand même un hacker!

Si tu détournes l'utilisation d'un objet à une autre utilisation, c'est du hacking. Par exemple, si j'utilise une cuillère pour décapsuler une bouteille, c'est du hack.

a écrit :
Mais, mon logiciel (Microsoft Expression Web 4)

Je suis entièrement du même avis que notre ami parsimonhi. Oublie ce logiciel.
Des alternatives ?
- Brackets (si tu fais seulement du HTML/CSS)
- Sublime Text ¹
- notepad++
- VIM
- webstorm (payant mais le nec plus ultra)
- VSC

_______
¹ tutoriel video pour l'utilisation
Modifié par niuxe (18 Dec 2024 - 14:49)

Bonjour,

Je remercie tous les amis qui m'ont renseigné.

Bien cordialement,