Entsperren Sie das Dreieck Secret in CSS

Question

Kann jemand erklären, wie es ein Dreieck bildet, wenn die CSS-Breite und Höhe auf 0 festgelegt sind.

.arrow-up { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 5px solid transparent; 
 
    border-right: 5px solid transparent; 
 
    border-bottom: 5px solid black; 
 
} 
 

 
.arrow-down { 
 
    width: 0; 
 
    height: 0; 
 
    border-left: 20px solid transparent; 
 
    border-right: 20px solid transparent; 
 
    border-top: 20px solid #f00; 
 
} 
 

 
.arrow-right { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 60px solid transparent; 
 
    border-bottom: 60px solid transparent; 
 
    border-left: 60px solid green; 
 
} 
 

 
.arrow-left { 
 
    width: 0; 
 
    height: 0; 
 
    border-top: 10px solid transparent; 
 
    border-bottom: 10px solid transparent; 
 
    border-right:10px solid blue; 
 
}

<div class="arrow-up"></div> 
 
<div class="arrow-down"></div> 
 
<div class="arrow-left"></div> 
 
<div class="arrow-right"></div>

Answer 1

eine Grenze auf der Außenseite der Satz bemessen Abmessungen eines Elements erzeugt wird, es sei denn, man box-sizing: border-box verwenden und dann alle Grenzen und Polsterung in der eingestellten Größe dieses Elements enthalten. Obwohl die Elementgröße 0 ist, wird sie daher außerhalb der in der Rahmenregel festgelegten Größe erstellt.

Nichts magisches passiert hier.

z.

div { 
    width: 0; 
    height: 0; 
    border: 10px solid #ccc; 
} 

<div></div> 

http://codepen.io/paulcredmond/pen/rrpRjz

Answer 2

Dies ist nur ein kluger CSS Trick, auf CSS Tricks gezeigt.

It’s basicly like a giant 3D border-corner. (when the left and top border-color are different the edge is diagonal, that’s being used to make this triangle).