sfondo div con linea obliqua

[saltodifondi]

Ciao a tutti, sapreste dirmi come fare ad inserire una line obliqua che attraversa un div in diagonale e che mantenga sempre lo stesso spessore sia su un div di 200px X 300pX che su un div di 20px x 120px ? ci sto impazzendo

[Mich_]

Gli sfondi con i CSS non sono ridimensionabili.
Quindi e` necessario usare un'immagine.

Se fai un'immagine 10x10 con la riga sulla diagonale, puoi rappresentarla con le dimensioni che vuoi: con questo codice vedi se le varie immagini vengono rappresentate con sufficiente precisione:
[img]diag.gif[/img]
[img]diag.gif[/img]



Per inserire tale immagine come sfondo, e` pero` necessario usare le sovrapposizioni:

HTML:
<div class="conten">
  

ad esempio per inserire del testo</p>
  [img]diag.gif[/img] 
</div>


CSS:
.conten {
  position: relative;
  ...
}
.conten img {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 10;
  top:0; left:0;
}
.conten p {
  position: absolute;
  z-index: 20;
  top:0; left:0;
}

Nota che questo metodo e` contrario alla semantica (si usa un'immagine come sfondo), per cui e` da usare con parsimonia.


In alternativa, si puo` pensare di realizzare qualcosa con JS, mediante l'uso di una immagine di 1px x 1px da posizionare ripetutamente sulla diagonale. Questo sistema e` migliore dal punto di vista semantico, ma succhia risorse al client, e se JS non e` abilitato si perde lo sfondo.