esquinas - div diagonal css
dibujar líneas diagonales en fondo div con CSS (7)
Tengo div para ver la caja de vista previa
HTML:
<div class="preview-content">PREVIEW</div>
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
Gracias de antemano
¿Por qué no usar SVG para trazar la línea, algo como esto?
.diag {
background: url("data:image/svg+xml;utf8,<svg xmlns=''http://www.w3.org/2000/svg'' version=''1.1'' preserveAspectRatio=''none'' viewBox=''0 0 100 100''><path d=''M1 0 L0 1 L99 100 L100 99'' fill=''black'' /><path d=''M0 99 L99 0 L100 1 L1 100'' fill=''black'' /></svg>");
background-repeat:no-repeat;
background-position:center center;
background-size: 100% 100%, auto;
}
<div class="diag" style="width: 300px; height: 100px;"></div>
Eche un vistazo aquí: http://jsfiddle.net/tyw7vkvm
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 favor revisa lo siguiente.
<canvas id="myCanvas" width="200" height="100"></canvas>
<div id="mydiv"></div>
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;
}
Puedes hacerlo algo como esto:
<style>
.background {
background-color: #BCBCBC;
width: 100px;
height: 50px;
padding: 0;
margin: 0
}
.line1 {
width: 112px;
height: 47px;
border-bottom: 1px solid red;
-webkit-transform:
translateY(-20px)
translateX(5px)
rotate(27deg);
position: absolute;
/* top: -20px; */
}
.line2 {
width: 112px;
height: 47px;
border-bottom: 1px solid green;
-webkit-transform:
translateY(20px)
translateX(5px)
rotate(-26deg);
position: absolute;
top: -33px;
left: -13px;
}
</style>
<div class="background">
<div class="line1"></div>
<div class="line2"></div>
</div>
Aquí hay un jsfiddle .
Versión mejorada de la answer para su propósito.
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;
}
<div class=''crossed''></div>
Explicación, según lo solicitado:
En lugar de dibujar líneas diagonales, se me ocurre que podemos colorear los llamados triángulos espaciales negativos adyacentes a donde queremos ver estas líneas. El truco que se me ocurrió para lograr esto explota el hecho de que los bordes de CSS multicolores están biselados en diagonal:
.borders {
width: 200px;
height: 100px;
background-color: black;
border-width: 40px;
border-style: solid;
border-color: red blue green yellow;
}
<div class=''borders''></div>
Para que las cosas se ajusten de la manera que deseamos, elegimos un rectángulo interior con dimensiones 0 y píxeles LINE_THICKNESS, y otro con esas dimensiones invertidas:
.r1 { width: 10px;
height: 0;
border-width: 40px;
border-style: solid;
border-color: red blue;
margin-bottom: 10px; }
.r2 { width: 0;
height: 10px;
border-width: 40px;
border-style: solid;
border-color: blue transparent; }
<div class=''r1''></div><div class=''r2''></div>
Finalmente, utilice los pseudo-selectores :before y :after y la posición relative / absolute como una manera ordenada de insertar los bordes de los dos rectángulos anteriores uno encima del otro en su elemento HTML de elección, para producir una cruz diagonal. Tenga en cuenta que los resultados probablemente se vean mejor con un valor LINE_THICKNESS fino, como 1px.
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;
}
<div class=''borders''></div>