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