解鎖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，它的大小也會超​​出邊界規則中確定的大小。

沒有什麼神奇的發生在這裏。

E.g.

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

<div></div> 

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

Answer 2

這僅僅是一個聰明CSS Trick，對CSS技巧所示。

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