28172 sujets

CSS et mise en forme, CSS3

[Résolu] Faire une forme personnalisée en css pur

upload/1560367324-76004-banninrevague.png Bonjour,
En photo jointe un background avec une forme de "vague" en haut.

Pouvez vous me dire s'il est possible de réaliser ceci en CSS pur svp ?
J'aimerai donner cette forme (à peu près) à un background de container.

Le but est d'utiliser le moins possible d'images ,-) et sans framework bien sûr.

J'ai cherché longtemps sur le net sans succès. Sauf pour faire des forme communes (rond, rectangle etc....).


Merci à vous.
Modifié par nadsud (12 Jun 2019 - 21:22)
Effectivement c'est une bonne solution et très facile. Disons que je cherchais une solution en CSS au cas où...ça aurait été plus fun ,-))

Merci en tous cas !
Bonsoir,

Je suis moi aussi un adepte du CSS mais là, pour le coup, le SVG c'est le top pour réaliser ce genre de chose.

Parce que bien sûr un jour on aura CSS4 pour lequel des propriétés telles que 'border-corner-shape: curve' pourront être correctement supportées, mais même dans ce cas ce sera vraiment fastidieux à réaliser pour aucun bénéfice évident, et qui plus est chaque propriété servant pour des réalisations très spécifiques.
Modifié par Olivier C (13 Jun 2019 - 21:03)
Meilleure solution
nadsud a écrit :
upload/1560367324-76004-banninrevague.png Bonjour,
En photo jointe un background avec une forme de "vague" en haut.
http://www.shuttle-paris-airports.com/paris-shuttle
Pouvez vous me dire s'il est possible de réaliser ceci en CSS pur svp ?
J'aimerai donner cette forme (à peu près) à un background de container.

Le but est d'utiliser le moins possible d'images ,-) et sans framework bien sûr.

J'ai cherché longtemps sur le net sans succès. Sauf pour faire des forme communes (rond, rectangle etc....).


Merci à vous.

Bonjour, je trouve que c'est une bonne solution
Modifié par Kikass37 (13 Jun 2019 - 01:08)
Un petit exemple amusant (et ancien) en SVG (le système d'animation utilisé est obsolète par contre, même s'il fonctionne encore) : CodePen.
Merci Olivier, en effet j'avais consulté Codepen Codepen mais j'avais pas vu cet exemple ! Choupinet, ça peut faire l'affaire en le bidouillant Smiley biggthumpup .
nadsud a écrit :
Merci Olivier, en effet j'avais consulté Codepen Codepen mais j'avais pas vu cet exemple ! Choupinet, ça peut faire l'affaire en le bidouillant Navrée, ça n'avait pas marché la 1ère fois. Image rajoutée ! Merci à vous Bacasable.


Navrée, ça n'avait pas marché la 1ère fois. Image rajoutée ! Merci à vous Bacasable.
Modifié par Rodolphe (11 Oct 2019 - 17:42)
Sujet clos
Aller à