27350 sujets

CSS et mise en forme, CSS3

Salut à tous !

Ça me fait bizarre de revenir ici après 11 ans et demi d'absence Smiley ravi

Je cherche à afficher des images, dans une forme qui ne soit ni vraiment un carré, ni vraiment un rond. Un carrond quoi...

Bon, comme c'est pas très clair, je vous ai fait un dessin.
upload/1605732385-21118-carrond.png
Je pense que c'est plus compliqué qu'un bête border-radius, je ne suis même pas sûr que ce soit possible sans JavaScript (à défaut, une solution simple en JS me conviendrait).

Quelqu'un a une idée ?

Merci d'avance pour votre aide Smiley biggrin
Modifié par Blaise18 (18 Nov 2020 - 22:02)
Bonsoir,
sinon avec un petit CSS clip-path, en utilisant cette forme en SVG ? Smiley smile
allan00958 a écrit :
Hello

Je pense que d'autres sauront mieux t'aider que moi, mais en faisant une recherche vite fait sur Google: https://coveloping.com/tools/css-shapes-generator

Tu cliques sur 'go to tool', ensuite 'border' et j'ai vis 54px à border-radius. Ça se rapproche un peu.

Merci de ta réponse, mais je ne veux pas arrondir les coins d'un carré. Je veux plutôt écraser un rond...

La différence est subtile, mais en gros, la forme ne doit pas contenir de ligne droite.

C'est peut-être plus clair sur ce dessin :
upload/1605735212-21118-carrond2.png
Je pense que tu peux créer une image en png avec photoshop ou autre. Les bords seraient blancs et le milieu transparent. Et ensuite superposer le png en css.
Moi j'aurai également mis un border radius... mais il aurait fallu un elliptique, c'est ça ?
Modérateur
Blaise18 a écrit :
Mais je n'y suis pas parvenu, j'avais l'impression qu'il manquait un troisième angle...

Effectivement il manque un troisième argument pour faire ça.... c'est domage c'est clair
Modifié par _laurent (23 Nov 2020 - 14:51)