Posteriormente a consultar con especialistas en la materia, programadores de deferentes ramas y profesores hemos dado con la respuesta a la pregunta y la compartimos en esta publicación.
Solución:
La solución casi perfecta, que se escala automáticamente a las dimensiones de un elemento, sería el uso de gradiente lineal CSS3 conectado con calc() como se muestra a continuación. El principal inconveniente es, por supuesto, la compatibilidad. El siguiente código funciona en Firefox 25 y Explorer 10 y 11, pero en Chrome (he probado los desarrolladores v30 y v32) hay algunos problemas sutiles con las líneas que desaparecen si son demasiado estrechas. Además, desaparecer depende de las dimensiones de la caja: el estilo a continuación funciona para div width: 100px; height: 100pxpero falla por div width: 200px; height: 200px por lo que en mis pruebas 0.8px en los cálculos debe ser reemplazado con al menos 1.1048507095px para que se muestren las diagonales e incluso entonces la calidad de representación de la línea es bastante pobre. Esperemos que este error de Chrome se resuelva pronto.
.crossed
background:
linear-gradient(to top left,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%),
linear-gradient(to top right,
rgba(0,0,0,0) 0%,
rgba(0,0,0,0) calc(50% - 0.8px),
rgba(0,0,0,1) 50%,
rgba(0,0,0,0) calc(50% + 0.8px),
rgba(0,0,0,0) 100%);
Puedes hacerlo algo como esto:
Aquí hay un jsfiddle.
Versión mejorada de respuesta para su propósito.
Puedes usar SVG para dibujar las líneas.
.diag
background: url("data:image/svg+xml;utf8,");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
Juega aquí: http://jsfiddle.net/tyw7vkvm
Sección de Reseñas y Valoraciones
Si crees que ha resultado de ayuda nuestro post, sería de mucha ayuda si lo compartieras con más programadores de esta forma contrubuyes a difundir esta información.