CSSArrowPlease.com如何生成箭头？

Question

我已经在我的网站上使用了这个功能，但我很困惑它是如何使用CSS生成箭头的。

在CSS中似乎没有任何尖叫“形状代”的东西。

上their website显示的默认CSS是：

.arrow_box { 
    position: relative; 
    background: #88b7d5; 
    border: 4px solid #c2e1f5; 
} 
.arrow_box:after, .arrow_box:before { 
    bottom: 100%; 
    border: solid transparent; 
    content: " "; 
    height: 0; 
    width: 0; 
    position: absolute; 
    pointer-events: none; 
} 

.arrow_box:after { 
    border-color: rgba(136, 183, 213, 0); 
    border-bottom-color: #88b7d5; 
    border-width: 30px; 
    left: 50%; 
    margin-left: -30px; 
} 
.arrow_box:before { 
    border-color: rgba(194, 225, 245, 0); 
    border-bottom-color: #c2e1f5; 
    border-width: 36px; 
    left: 50%; 
    margin-left: -36px; 
} 

它是如何创建一个箭头？

感谢

Answer 1

它“之前”使用CSS和“之后”伪元素 http://www.w3schools.com/css/css_pseudo_elements.asp