CSS三角形有沒有點

Question

這裏是正在發生的事情：

CSS：

.speech-box { 
    height:76px; 
    width:220px; 
    padding:6px 10px; 
    background-image: linear-gradient(#4f4f4f,#000); 
} 

.speech-box:before { 
    content:''; 
    width: 0; 
    height: 0; 
    border-top: 5px solid transparent; 
    border-bottom: 5px solid transparent; 
    border-right:5px solid #4f4f4f; 
    position:relative; 
    left:-15px; 
    top:-3px; 
} 

而我的HTML：

<div class="speech-box"> 
    <span class="speech"></span> 
</div> 

這裏是一個小提琴：http://jsfiddle.net/xqy4dLbc/

我猜測問題出在我的HTML上？

Answer 1

您需要

display:block; 

或

display:inline-block; 

添加到.speech-box:before：

DEMO

僞元素的默認顯示屬性爲inline（see MDN），並且您不能在內聯元素上設置高度。因此您設置的height:0;不適用。