Come realizzare questa barra con css?

[Alejandro]

SAlve a tutti vorrei creare questa stessa barra allegata ma con il css. Ossia con il repeat e poi ci metto il testo sopra. Ma non co come dividere le immagini essendo anche il disegno in diagonale ed avendo lo stesso una fine tagliata a dx.

Qualcuno mi sa aiutare?

[Alejandro]

dimenticato l'immagine eccola:

[Alejandro]

Nessun aiuto?

ps BUona pasqua

[Alejandro]

HELP!!! VVoVe:

[Mich_]

Fondamentalmente quello che chiedi e` un bottone (o molto simile).

Ecco alcuni link. Non so se sono tutti inerenti la domanda, ma credo che qualcuno lo sia:
Bottoni con rollover
Bottoni creativi e CSS
Bottoni con rollover flessibili

[Alejandro]

Purtroppo non è così semplice. O almeno non lo è stato per me. Se guardi bene l'immagine ha un fill in diagonale e poi ha un taglio in alto a dx. Non sono riuscito a ripeterlo tramite un repeat. Soluzioni?

[Mich_]

Il taglio in alto a dx l'ho visto: lo risolvi mettendo un'immagine alla destra (ad esempio come list-style-img - supponendo che le tue immagini siano elementi di una lista).

Il fill diagonale non riesco a vederlo.

Ma poi cosa rappresenta l'immagine? E` un elemento decorativo o porta informazione?
Nel primo caso va messa come sfondo, nel secondo va inserita tramite <img>, con sovrapposta la scritta. E` una cosa che si fa, e che i browser riescono a gestire senza problemi, se realizzata con le dovute cautele.

[Alejandro]

Originariamente inviato da Mich_
Il taglio in alto a dx l'ho visto: lo risolvi mettendo un'immagine alla destra (ad esempio come list-style-img - supponendo che le tue immagini siano elementi di una lista).

Il fill diagonale non riesco a vederlo.

Ma poi cosa rappresenta l'immagine? E` un elemento decorativo o porta informazione?
Nel primo caso va messa come sfondo, nel secondo va inserita tramite <img>, con sovrapposta la scritta. E` una cosa che si fa, e che i browser riescono a gestire senza problemi, se realizzata con le dovute cautele.

Ok per il taglio, per il fill intendo il pattern che uso. Se metto un repeat non esce così, dove sbaglio? Forse il file che uso per il repeat non è tagliato giusto?

voglio allegerire il sito non voglio usare un immagine per ogni barra. Vorrei mettere la scritta sopra ogni menu ed in background la barra elastica a seconda della misura. Questo è il sito per capirci www.dpcgamers.com

[Alejandro]

Ho capito il mio errore ma non ho ben chiaro il codice da mettere sul css.

Allora vorrei fare questo: bordo sx - sfondo in repeat - bordo di dx

Al momento il codice è questo:

.top10users .top {
background-image: url('../img/bar_tot.png');
background-position: top left;
background-repeat: repeat-x;
height: 23px;
}

ma mancano i bordi di dx e sx come li aggiungo?

[Alejandro]

Ho provato anche una cosa del genere:

.top10users .top {
background-image: url('../img/bar_tot.png'), url('../img/bar_tot_right.png'), url('../img/bar_tot_left.png');
background-repeat: repeat-x, no-repeat, no-repeat;
background-position: top left, top right, top left;
height: 21px;
}

ma se scrivo questo codice non compare nulla come barra.