dibujar líneas diagonales en fondo div con CSS

Tengo div para ver la caja de vista previa

HTML:

PREVIEW

CSS:

 .preview-content { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAGklEQVQIW2NkYGD4D8SMQAwGcAY2AbBKDBUAVuYCBQPd34sAAAAASUVORK5CYII=) repeat; width: 100%; min-height: 300px; max-height: 300px; line-height: 300px; text-align: center; vertical-align: middle; font-size: 2em; } 

P: cómo agregar líneas diagonales a fondo div como en la imagen

nota: con CSS solo si es posible

avance

Gracias de antemano

Puedes hacerlo algo como esto:

  

Aquí hay un jsfiddle .

Versión mejorada de la respuesta para su propósito.

La solución casi perfecta, que se escala automáticamente a las dimensiones de un elemento, sería el uso del degradado 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) existen algunos problemas sutiles con la desaparición de las líneas si son demasiado estrechas. Además, la desaparición depende de las dimensiones del cuadro: el estilo a continuación funciona para div { width: 100px; height: 100px} div { width: 100px; height: 100px} , pero falla para div { width: 200px; height: 200px} div { width: 200px; height: 200px} para la cual en mis pruebas, 0.8px en los cálculos deben ser reemplazados con al menos 1.1048507095px para que se muestren las diagonales, e incluso entonces la calidad de la línea es bastante baja. 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%); } 

¿Por qué no usar SVG para trazar la línea, algo como esto?

 .diag { background: url("data:image/svg+xml;utf8,"); background-repeat:no-repeat; background-position:center center; background-size: 100% 100%, auto; } 

Eche un vistazo aquí: http://jsfiddle.net/tyw7vkvm

Todas las otras respuestas a esta pregunta de 3 años requieren CSS3 (o SVG). Sin embargo, también se puede hacer con nada más que CSS2 viejo cojo:

 .crossed { position: relative; width: 300px; height: 300px; } .crossed:before { content: ''; position: absolute; left: 0; right: 0; top: 1px; bottom: 1px; border-width: 149px; border-style: solid; border-color: black white; } .crossed:after { content: ''; position: absolute; left: 1px; right: 1px; top: 0; bottom: 0; border-width: 149px; border-style: solid; border-color: white transparent; } 
 

Por favor revisa lo siguiente.

  

JS:

 var c = document.getElementById("myCanvas"); var ctx = c.getContext("2d"); ctx.strokeStyle="red"; ctx.moveTo(0,100); ctx.lineTo(200,0); ctx.stroke(); ctx.moveTo(0,0); ctx.lineTo(200,100); ctx.stroke(); 

CSS:

 html, body { margin: 0; padding: 0; } #myCanvas { padding: 0; margin: 0; width: 200px; height: 100px; } #mydiv { position: absolute; left: 0px; right: 0; height: 102px; width: 202px; background: rgba(255,255,255,0); padding: 0; margin: 0; } 

jsfiddle

puede usar una propiedad de transformación CSS3:

 div { transform:rotate(Xdeg); -ms-transform:rotate(Xdeg); /* IE 9 */ -webkit-transform:rotate(Xdeg); /* Safari and Chrome */ } 

Xdeg = su valor

Por ejemplo…

Puede hacer más div y usar una propiedad de índice z. Por lo tanto, crea un div con línea y gíralo.

 .borders { width: 200px; height: 100px; background-color: black; border-width: 40px; border-style: solid; border-color: red blue green yellow; }