5

¿Por qué pasa que cuando se le da width y height 0 se generan triángulos? ¿Cómo es que funcionan los bordes? ¿Por qué se dibuja en forma de triángulo cada borde?

Me refiero a esto (ejemplo):

div {
  width: 0;
  height: 0;
  border-right: 60px solid red;
  border-left: 60px solid yellow;
  border-bottom: 60px solid blue;
  border-top: 60px solid black;
}
<div></div>

3 respuestas 3

9

¿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.

  1. A una caja, le vamos a agregar un borde de 10px de grosor con cada lado de color.
  2. 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.

2
  • 1
    Muy bien explicado y la animación creo que resuelve muchas dudas +1 Commented el 3 feb. 2018 a las 11:55
  • 1
    si la animacion esta super explicado :D Commented el 3 feb. 2018 a las 14:16
1

El width y height se refiere a la anchura y a la altura de un objeto respectivamente. Por un nivel superior está el padding, luego el borde y luego el margen. Es algo que se ve de manera muy clara cuando inspeccionas un elemento en Chrome o Firefox.

Cómo funcionan los espacios en los objetos

Ahora bien, existe una propiedad que se llama box-sizing de CSS3 el cual te regula desde dónde empiezas a contar este ancho y alto, si desde el contenido, o desde el borde. Puedes echarle un vistazo aquí: https://www.w3schools.com/cssref/css3_pr_box-sizing.asp

1
  • Realmente esta respuesta es muy explicativa para saber la estructura de como funciona un borde en CSS pero no acabo de ver como puede ayudar esto al OP en su pregunta de porque se generan los triángulos al ponerle height: 0 y width: 0. Commented el 3 feb. 2018 a las 11:58
1

Hace un tiempo había adaptado una animación de Chris Coyler. Dejo el ejemplo, que creo que complementa bien a las respuestas.

No es necesario ver el código, simplemente ejecutar:

<style>
:root {
    --step-timing: 0.8s 0.2s;
    --step-timing: 2.4s 0.6s;
    --borde: 25px;
    --border-top: solid #EE7C31;
    --border-left: solid #F5D97B;
    --border-bottom: solid #D94948;
    --border-right: solid #8DB434;
}

.triangulo {
    width: 100px;
    height: 100px;
    margin: 0 auto;
    background: tan;
    border-top: 0 var(--border-top);
    border-left: 0 var(--border-left);
    border-bottom: 0 var(--border-bottom);
    border-right: 0 var(--border-right);
    transition: var(--step-timing);
}

.step-1 > .triangulo {
    border-top-width: var(--borde);
}
.step-2 > .triangulo {
    border-left-width: var(--borde);
}
.step-3 > .triangulo {
    border-right-width: var(--borde);
}
.step-4 > .triangulo {
    border-bottom-width: var(--borde);
}
.step-5 > .triangulo {
    background: transparent;
}
.step-7 > .triangulo {
    width: 0;
    height: 0;
}
.step-8 > .triangulo {
    border-left-color: transparent;
}
.step-9 > .triangulo {
    border-right-color: transparent;
}
.step-10 > .triangulo {
    border-top-color: transparent;
}
.step-12 > .triangulo {
    border-bottom-width: calc(2.5 * var(--borde));
}
.step-13 > .triangulo {
    border-right-width: calc(2 * var(--borde));
    border-left-width: 0;
}
.step-14 > .triangulo {
    border-left-width: calc(2 * var(--borde));
    border-right-width: 0;
}
.step-15 > .triangulo {
    border-top: var(--borde) var(--border-top);
    border-right: 0 var(--border-right);
    border-bottom: calc(2.5 * var(--borde)) var(--border-bottom);
    border-left: calc(2 * var(--borde)) var(--border-left);
}
.step-16 > .triangulo {
    border-width: var(--borde);
}
.step-17 > .triangulo {
    border-top-color: transparent;
    border-right-color: transparent;
    border-left-color: transparent;
}

.titulo {
    width: 300px;
    padding: 0.3em 2ch;
    color: white;
    background: #D94948;
    border-radius: calc(2 * var(--borde));
    margin: 0 auto;
    opacity: 0;
    display: none;
    transition: var(--step-timing);
}
.step-10 > .titulo {
    display: block;
}
.step-11 > .titulo {
    opacity: 1;
}
.step-11 > .titulo > * {
    opacity: 0;
}
.step-12 > .titulo > .step-12 {
    opacity: 1;
}

.step-final > #codigo {
    display: block;
}

.step-final > .titulo > #de-nuevo {
    opacity: 1;
}

body {
    background: #333;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: white;
    text-align: center;
    font-size: large;
    transform: translateZ(0);
}

.steps {
    position: relative;
    min-height: 1.4em;
}

.steps > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: #333;
    transition: 0.5s;
}
.steps > .step-0 {
    opacity: 1;
}
.step-1 > .steps > .step-1 {
    opacity: 1;
}
.step-2 > .steps > .step-2 {
    opacity: 1;
}
.step-5 > .steps > .step-5 {
    opacity: 1;
}
.step-6 > .steps > .step-6 {
    opacity: 1;
}
.step-7 > .steps > .step-7 {
    opacity: 1;
}
.step-8 > .steps > .step-8 {
    opacity: 1;
}
.step-11 > .steps > .step-11 {
    opacity: 1;
}
.step-12 > .steps > .step-12 {
    opacity: 1;
}
.step-13 > .steps > .step-13 {
    opacity: 1;
}
.step-14 > .steps > .step-14 {
    opacity: 1;
}
.step-15 > .steps > .step-15 {
    opacity: 1;
}
.step-16 > .steps > .step-16 {
    opacity: 1;
}
.step-17 > .steps > .step-17 {
    opacity: 1;
}

#codigo {
    margin: 1em auto 0 auto;
    text-align: center;
    display: none;
}

#codigo > pre {
    display: inline-block;
    text-align: left;
    padding: 0.4em 2ch;
    border-left: 5px solid #3F87A6;
    background-color: #EEE;
    color: #333;
}
</style>
<div id="demo">
    <div class="steps">
        <div class="step-0">Tomemos un contenedor (un div por ejemplo).</div>
        <div class="step-1">El contenedor tiene un border-top.</div>
        <div class="step-2">Y también tiene los otros bordes.</div>
        <div class="step-5">Veamos mejor con background transparente.</div>
        <div class="step-6">Y mirá cómo los bordes se encuentran en los ángulos.</div>
        <div class="step-7">Si hacemos que tenga un width: 0 y height: 0.</div>
        <div class="step-8">Y que 3 de los bordes sean transparentes.</div>
        <div class="step-11">¡Así se hace un triángulo en CSS!</div>
        <div class="step-12">Y si agrandamos el border-bottom es más puntiagudo</div>
        <div class="step-13">O si agrandamos el border-width-right va para el otro lado</div>
        <div class="step-14">O para el opuesto agrandando el border-width-left</div>
        <div class="step-15">El ancho de cada borde te permite jugar con la forma</div>
        <div class="step-16">Haciendo la forma de triángulo que quieras</div>
        <div class="step-17">Con sólo unas líneas de CSS</div>
    </div>
    <div class="triangulo"></div>
    <div class="titulo">
        <div class="step-12">¡Así se hace un triángulo en CSS!</div>
        <button id="de-nuevo">Ver de nuevo</button>
    </div>
    <div id="codigo">
        <pre>.triangulo {
  width: 0;
  height: 0;
  border: 30px solid transparent;
  border-bottom-color: red;
}</pre>
    </div>
</div>
<script>
var demo = document.getElementById('demo')

function animacion() {
    // Imagine a box

    // The box has border-top
    setTimeout(function() {
        demo.classList.add("step-1")
    }, 5000);

    // It also has the other borders
    setTimeout(function() {
        demo.classList.add("step-2")
    }, 11000);
    setTimeout(function() {
        demo.classList.add("step-3")
    }, 12000);
    setTimeout(function() {
        demo.classList.add("step-4")
    }, 13000);

    // The background of the box is transparent.
    setTimeout(function() {
        demo.classList.add("step-5")
    }, 18000);

    // Notice how the borders meet each other at angles.
    setTimeout(function() {
        demo.classList.add("step-6")
    }, 23000);

    // The box is actually zero width and zero height.
    setTimeout(function() {
        demo.classList.add("step-7")
    }, 32000);

    // Three of the borders are actually transparent in color.
    setTimeout(function() {
        demo.classList.add("step-8")
    }, 37000);
    setTimeout(function() {
        demo.classList.add("step-9")
    }, 39000);
    setTimeout(function() {
        demo.classList.add("step-10")
    }, 41000);

    // Done
    setTimeout(function() {
        demo.classList.add("step-11")
    }, 44000);

    // Puntiagudo
    setTimeout(function() {
        demo.classList.add("step-12")
    }, 54000);

    // A la izquierda
    setTimeout(function() {
        demo.classList.add("step-13")
    }, 59000);

    // A la derecha
    setTimeout(function() {
        demo.classList.add("step-14")
    }, 64000);

    // Ancho de cada borde
    setTimeout(function() {
        demo.classList.add("step-15")
    }, 68000);

    // Forma que quieras
    setTimeout(function() {
        demo.classList.add("step-16")
    }, 72000);

    // Sólo unas líneas
    setTimeout(function() {
        demo.classList.add("step-17")
    }, 76000);

    // Final
    setTimeout(function() {
        demo.classList.add("step-final")
    }, 78000);

}

animacion();

document.getElementById('de-nuevo')
    .addEventListener('click', function() {
        demo.classList = 'demo step-0';
        animacion();
    });
</script>

1
  • muy explicado gracias Commented el 15 feb. 2018 a las 14:41

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.