¿Cómo crear una línea diagonal dentro de una celda de tabla?

Question

¿Cómo puedo crear una línea diagonal desde la esquina inferior izquierda hasta la esquina superior derecha de una celda determinada?

para conseguir este

<table> 
    <tr> 
     <td class="crossOut">A1</td> 
     <td>B1</td> 
    </tr> 
    <tr> 
     <td>A2 Wide</td> 
     <td class="crossOut">B2<br/>Very<br/>Tall</td> 
    </tr> 
</table> 

para mostrar este

Answer 1

No sé si es la mejor manera, pero no puedo hacer eso con CSS. Mi respuesta está en jQuery:

http://jsfiddle.net/zw3Ve/13/

$(function(){ 
    $('.crossOut').each(function(i){ 
     var jTemp = $(this), 
      nWidth = jTemp.innerWidth(), 
      nHeight = jTemp.innerHeight(), 
      sDomTemp = '<div style="position:absolute; border-color: transparent black white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+nHeight+'px; z-index:-2"></div>'; 

     sDomTemp += '<div style="position:absolute; border-color: transparent white white white; border-style:solid; border-width:'+nHeight +'px '+nWidth +'px 0px 0px; width:0; height:0; margin-top:-'+(nHeight-1)+'px; z-index:-1"></div>'; 

     jTemp.append(sDomTemp); 
    }); 
}); 

o

http://jsfiddle.net/zw3Ve/16/ (más limpio, con clase CSS)

parte

CSS:

.crossOut .child{ 
    position:absolute; 
    width:0; 
    height:0; 
    border-style:solid; 
} 
.crossOut .black-triangle{ 
    z-index:-2; 
    border-color: transparent black white white; 
} 
.crossOut .white-triangle{ 
    border-color: transparent white white white; 
    z-index:-1; 
} 

jQuery código:

$(function(){ 
    $('.crossOut').each(function(i){ 
     var jTemp = $(this), 
      nWidth = jTemp.innerWidth(), 
      nHeight = jTemp.innerHeight(), 
      sDomTemp = '<div class="child black-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+nHeight+'px; "></div>'; 

     sDomTemp += '<div class="child white-triangle" style="border-width:'+nHeight +'px '+nWidth +'px 0px 0px; margin-top:-'+(nHeight-1)+'px;"></div>'; 

     jTemp.append(sDomTemp); 
    }); 
}); 

Lo bueno es que funciona con cualquier ancho y alto de una celda de tabla.

Editar:

yo no estaba contento con la calidad de la prestación de los triángulos hechos con fronteras CSS así que utiliza el css-rotación. Creo que este es un mejor trabajo (y las líneas se renderiza mejor):

http://jsfiddle.net/zw3Ve/21/

(usando -sand-transform es para IE6, por lo que el uso es opcional.)

Edit2: La última la versión no tiene soporte para IE7-IE8 (parece que la transformación -sand solo funciona en estilos CSS y no en estilos escritos por JavaScript). Hice una versión con compatibilidad con navegadores antiguos:

http://jsfiddle.net/zw3Ve/23/

Answer 2

Es posible. Try my solution:

.line { 
    width: 200px; 
    height: 50px; 
    border: 1px solid #cccccc; 
    margin: 10px; 
    padding: 10px; 
    position: relative; 
} 

.me { 
    position: absolute; 
    left: 0; 
    top: 0; 
    height: 100%; 
    width: 100%; 
    z-index: -1; 
} 


<div class="line">LINE! 
    <img src="http://i.piccy.info/i7/c7a432fe0beb98a3a66f5b423b430423/1-5-1789/1066503/lol.png" class="me" /> 
</div> 

Answer 3

He encontrado una solución simple, CSS sólo el uso de gradientes lineales:

puede simplemente especificar una línea diagonal mediante la definición de un gradiente lineal. El degradado lineal se convierte en varios colores de detención. El inicio y el segundo color son iguales (= sin gradiente). Lo mismo ocurre con el último y el último color. Los colores entre ellos (alrededor del 50%) se utilizan para la línea diagonal.

Puedes probarlo aquí:

td 
 
{ 
 
\t border: 1pt solid black; 
 
} 
 

 
td.diagonalRising 
 
{ 
 
\t background: linear-gradient(to right bottom, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%); 
 
} 
 

 
td.diagonalFalling 
 
{ 
 
\t background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%); 
 
} 
 

 
td.diagonalCross 
 
{ 
 
\t position: relative; 
 
\t background: linear-gradient(to right bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 49.9%,rgba(0,0,0,1) 50%,rgba(0,0,0,1) 51%,rgba(0,0,0,0) 51.1%,rgba(0,0,0,0) 100%); 
 
} 
 

 
td.diagonalCross:after 
 
{ 
 
\t content:  ""; 
 
\t display:  block; 
 
\t position: absolute; 
 
\t width:  100%; 
 
\t height:  100%; 
 
\t top:   0; 
 
\t left:  0; 
 
\t z-index:  -1; 
 
\t background: linear-gradient(to right top, #ffffff 0%,#ffffff 49.9%,#000000 50%,#000000 51%,#ffffff 51.1%,#ffffff 100%); 
 
}

<table> 
 
<tr><td>a</td><td class="diagonalRising">abc</td><td class="diagonalFalling">abcdefghijklmnopqrstuvwxyz</td><td class="diagonalCross">abcdefghijklmnopqrstuvwxyz<br>qaywsxedcrfvtgbzhnujmikolp</td></tr> 
 
</table>

desgracia apenas se puede especificar el ancho de línea. Lo probé con Firefox, Chrome, Opera e Internet Explorer. Se ve bien en todos ellos (pero ligeramente diferente en IE en comparación con los demás).