Hmm... se me ocurre usar dos elementos con borders que formen la diagonal. Usando dos elementos, uno a la izquierda y otro a la derecha. El izquierdo tendría border-right y border-top, y el derecho border-left y border-bottom. Poniendo en transparencia los border-top y border-bottom se logra una diagonal. Jugando con su posicionamiento se puede lograr hacer una linea.
Para que se adapte a las resoluciones puedes usar media queries, no se adaptará 100% de inmediato, pero si se verá mejor.
Este es mi experimento: http://jsfiddle.net/mrbrownie/NBLAa/5/
Espero te sirva!
El HTML:
Código HTML:
<div class="background-container">
<div class="tl"></div>
<div class="br"></div>
</div> El CSS:
Código HTML:
html, body{
background-color:white;
width:100%;
height:100%;
}
.background-container{
background-color:#313131;
min-width:100%;
min-height:100%;
position:relative;
overflow: hidden;
}
.tl, .br{
top:0;
position:absolute;
}
.tl{
border-right:2560px transparent solid;
border-top:1440px white solid;
right:0;
top:0;
}
.br{
border-left:2560px transparent solid;
border-bottom:1440px white solid;
right:-1px;
}
@media all and (min-width:640px) and (max-width:799px){
.tl{
border-right:800px transparent solid;
border-top:600px white solid;
right:0;
top:0;
}
.br{
border-left:800px transparent solid;
border-bottom:600px white solid;
right:-1px;
}
}
@media all and (min-width:800px) and (max-width:1023px){
.tl{
border-right:1024px transparent solid;
border-top:768px white solid;
right:0;
top:0;
}
.br{
border-left:1024px transparent solid;
border-bottom:768px white solid;
right:-1px;
}
}
@media all and (min-width:1024px) and (max-width:1279px){
.tl{
border-right:1280px transparent solid;
border-top:960px white solid;
right:0;
top:0;
}
.br{
border-left:1280px transparent solid;
border-bottom:960px white solid;
right:-1px;
}
}