[SOLUCIONADO] Linea diagonal infinita

[crafter_v]

Hola, estoy haciendo mi web y en la sección de "contacto" quiero poner una linea diagonal cruzando la pantalla que se adapte al monitor.

De momento tengo esto:

http://www.alfonsocarbonell.com/contacto2.html

y el codigo:

CSS

#linea {

width:100%;
position:absolute;
transform:rotate(-45deg);
}



HTML

<div id="linea">
<hr>
</div>


¿como hago para colocar la linea exactamente donde quiero y que sea infinita?

[C2am]

Hola
Primero "The transform property is not supported in any browser."
En consecuencia es necesario los prefijos correspondientes:
http://www.w3schools.com/cssref/css3_pr_transform.asp

Saludos

[crafter_v]

Ok, ya he puesto los prefijos pero sigue igual.

[C2am]

Te falta la altura, y deberías tener en cuenta que no hay pantallas cuadradas, por lo cual los 45º hará que el extremo superior se vea en el vertice derecho-superior, y que el extremo inferior no coincida con el vértice izq-inferior.

¿Cómo quieres que quede?

[crafter_v]

Gracias por tu respuesta.

Lo que quiero es que esa linea se quede siempre en el mismo sitio pero que si el monitor es mas grande se alargue lo necesario para abarcarlo por completo.

Hago una captura de como quiero que quede.

[crafter_v]

http://www.gigasize.com/get/x6qf9x64b0f

[crafter_v]

Nose si se entiende bien lo que quiero.

La idea es que la linea se vea en la esquina inferior derecha a una resolucion de 1024x768 y que se quede fija en ese sitio siempre pero que si el monitor es mas grande que se alargue abarcandolo lo necesario.

[C2am]

Usa algún servicio como imageshack.us para publicar imágenes en el foro.

Entonces es al reves de como lo tienes:
En este momento está asi: /
¿Y lo quieres así : \ ?
Saludos

[pzin]

No me imagino una forma de hacerlo puramente en CSS. Seguramente acabes con la necesidad de usar JavaScript.

La cuestión es que rotate() no admite medidas relativas, que es lo que necesitarías; de hecho creo que sólo admite valores angulares.

Todo esto lo afirmo sin indagar mucho en el asunto.

[crafter_v]

Ok ok, gracias a los dos.

[raexman]

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;
    }
    
}

[crafter_v]

Parece que funciona, gracias!