¿como es q funcionan los bordes ???
Cada borde se dibuja dependiendo del tamaño declarado o asignado a un elemento, el navegador lo pinta sumando por cada pixel de grosor, el mismo ancho del borde + 2 pixeles.
¿Como así?, un ejemplo, digamos que tenemos 2 cajas y cada caja mide 50px de ancho y 50px de alto.
- A una caja, le vamos a agregar un borde de 10px de grosor con cada lado de color.
- A la otra, le vamos a agregar una sombra a cada lado con los mismos 10px de grosor.
¿Serán iguales?
caja{
display: inline-block;
width: 50px;
height: 50px;
vertical-align: middle;
margin: 2em;
}
.uno{
border-width: 10px;
border-style: solid;
border-color: green lime yellow lightgreen;
}
.dos{
box-shadow:
10px 0 0 0 green,
0 10px 0 0 lime,
0 -10px 0 0 yellow,
-10px 0 0 0 lightgreen
;
}
<caja class="uno"></caja>
<caja class="dos"></caja>
Como puedes comprobar, no es igual, mientras que tu esperas del borde, sea como la sombra, en realidad esos 2px, que te decía en un principio, son para que las esquinas del rectángulo, terminen juntándose y den la ilusión de borde que lo cubre todo.
porque pasa esto?
¿y porque se dibuja en forma de triangulo cada borde porque en forma de triangulo siendo que width y height estan en valor 0 ?
En realidad no son triángulos, son trapezoides, sino que uno de los lado de cada trapezoide que esta en contacto con la caja, su medida depende de la misma caja. Si ese lado esta en 0, obviamente parecerá un triangulo.
Igual es un poco difícil de entender, sin un ejemplo visual, para eso no hay nada mejor que ver el porque con esta animación que ilustrara mejor lo que quiero decir:
.triangulo{
display:inline-block;
min-width:0; min-height:0;
animation: a 10s linear both infinite;
will-change: border;
border-style: solid;
border-color: cyan darkcyan blue purple;
border-width: 100px;
position: fixed;
top: 50%;
text-align: center;
left: 50%;
transform: translate(-50%,-50%);
}
@keyframes a{
0% { border-width: 0px; }
100% { border-width: 100px; }
}
.triangulo::before{
content: '';
font-family: calibri;
animation: b 30s linear both infinite;
}
@keyframes b{
0%,20% { padding: 1em; content: 'Esto es un rectangulo'; }
21%,40% { content: 'Los bordes crecen de pixel a pixel, ampliandose un 1px a cada lado'; }
41%,60% { content: 'Y cuando no hay nada de contenido'; }
61% { content: 'Y cuando no hay nada de '; }
62% { content: 'Y cuando no hay'; }
63% { content: 'Y cuando no'; }
64% { content: 'Y cuando'; }
65% { content: 'Y cuando'; }
65% { content: 'Y'; padding: 1em;}
66% { content: 'Pasa'; }
67% { content: 'Pasa E'; }
68% { content: 'Pasa Es'; }
69% { content: 'Pasa Est'; }
70%,75% { content: 'Pasa Esto'; padding: 0px;}
76, 100% { content: ''; }
}
<span class="triangulo"></span>
¿Si se entendió? Es un poco difícil de explicar y me gustaría saber, si aún tienes dudas sobre
porque pasa esto???
Déjame un comentario en caso tal. Éxitos.