Footer bombé

Bonjour,

J'aimerais réaliser un footer bombé...

Je ne suis pas sur mon pc, donc je n'ai pas ma maquette...
Mais voici l'idée... à l'exception près que mon bombage sera symétrique (même lieu d'arrêt à gauche et à droite de l'écran), et il s'agira d'un simple aplat de couleur sans maison ni arbre ni petit bonhomme

Ma question est :
comment je peux réaliser le bombage que j'envisage de manière optimale sachant que je tiens à ce que mon site soit responsive...

(C'est là que je suis susceptible de dire des bêtises, n'hésitez pas à me reprendre si je me trompe... : )

- Admettons que je prenne une image de 2560px de large (comme il s'agit, je crois, de la définition d'écran la plus large utilisée pour le moment) ... Cette image fait un poids, d'une part, mais en plus, si elle est redimensionnée, elle risque de perdre en qualité (surtout si ce sont des couleurs indexées, seule option qui pourrait me permettre de réduire le poids de l'image au maximum).

- J'envisageais le SVG, mais il faut flash player... Et pour peu que l'internaute ne soit pas à l'aise avec l'informatique, et que le composant ne soit pas installé sur la machine ou qu'il soit périmé, mon footer ne sera pas visible (ça parait insignifiant pour un footer mais il est quasi le seul à apporter une note de couleur à mon site, c'est pourquoi il m'inquiète à ce point).

- Autres alternatives?
Il me semble à vrai dire pouvoir peut-être faire ce que je veux faire en CSS3 pur...
Mais... je ne sais pas comment on fait !

Bref. Savez-vous me donner la solution la plus légère, efficace et me diriger vers des tutos pour la mettre en oeuvre? Je ne vois pas quels mots-clés utiliser (recherche) pour parvenir à me fins compte tenu de l'état de mes maigres connaissances actuelles.

Merci beaucoup, et pardon pour la tartine !
Modifié par Reka (12 Dec 2013 - 13:14)

Avec ça peut-être.
https://developer.mozilla.org/fr/docs/CSS/border-radius

Et je mets un élément de largeur de 300% ou 400% alors? ...
Je vais tester, merci pour l'idée.

C'est effectivement la première idée qui m'est venue également, le border-radius.
En l'affectant sur les coins supérieurs gauche et droit ça devrait correspondre à ce que tu attends.
Selon la dimension de la fenêtre ou la résolution de l'écran, le résultat risque peut-être de changer un peu, à essayer en tout cas.

Idéalement, j'aurais besoin d'une sorte de text-indent vertical pour cacher une partie de ma div vers le bas...
On aurait ça en stock? Quelle propriété puis-je utiliser, svp?

Je ne suis pas sûre de pouvoir me contenter de la solution que vous me proposez, sauf si je l'utilise mal...

Voici de part et d'autre:
le résultat attendu :


... et le résultat obtenu :




J'ai construit mon code comme suit :

footer {
    display: block;
    width: 100%;
    height: 100px;
    background-color: #B2A900;
    border-top-left-radius: 100%;
    border-top-right-radius: 100%;
}

Encore merci pour vos alternatives à venir, s'il y en a.