Construction géométrique en CSS

Bonsoir,

Je travail en ce moment le desing d'un de mes projet et j'ai pensé à une bannière de cette forme :

http://data.imagup.com/7/1121357848.png

Le problème, c'est que mon site est extensible donc je suis obligé de passer par du CSS pour la création de cette forme.

J'ai vu quelques exemple ici.

Je me débrouille en CSS, mais là, j'avoue être perdu.

Quelqu'un aurait une idée à me proposer ?
Merci.
Modifié par Vict0 (29 May 2011 - 20:20)

Salut,

tu devrais expliquer plus en détail ce que tu entends par extensible ?
cette "bannière" est censée être le "header" de ton site ?

A+

Salut,

Tout à fait, cette bannière est supposé être le header de mon site.
Quand je dit extensible c'est qu'elle aura un min-width de 1024px et un max-width de 1440px.

Merci.

Salut,

pourquoi une image en background ne te convenait-elle pas ?

Salut,

Une image à une largeur et une hauteur fixe, je ne vois pas comment la rendre extensible.

;)

Yo,
Il y a une tonne de solutions pour ça, en vrac :

- Un image en background de la taille de ton max-width (voire un peu plus), centrée. En 1024, elle sera rognée sur les côtés, mais ça pourrait te convenir.

- Employer la technique des formes que tu as donné dans ce sujet, mais il faut savoir que c'est une exploitation des bordures, il faudra donc ruser / bidouiller à base de pos absolute, etc

- Une image en width 100%, dont le height est inconnu, le contenu du header positionné en absolute. C'est pas franchement glop, mais ça marche.

- Du JS, du CSS3
- etc etc
Modifié par Nigel (31 May 2011 - 10:59)

Bonsoir,

Après mûr réflexion, j'ai préféré garder une image à largeur fixe de 1280px.
En cas d'élargissement, d'autres images seront visible de part et d'autre de la bannière.

Merci de m'avoir aidé.

Un petit background en SVG, hmm?