CSSでトライアングルシークレットのロックを解除する

Question

CSSの幅と高さが0に設定されている場合、どのように三角形を形成するか説明できますか？

.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

あなたがbox-sizing: border-boxを使用している場合を除き境界は要素の集合サイズの寸法の外側に作成され、すべての国境やパディングは、その要素の集合サイズに含まれています。したがって、エレメントのサイズが0であっても、それはあなたのボーダールールで決められたサイズの外に構築されています。

ここでは何も起こりません。

など。

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

<div></div> 

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

Answer 2

これは、CSSのトリックに示され、CSS Trickだけ賢いです。

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