CSS triangle has no point

Question

Here is what is happening:

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;
}

And my HTML:

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

And here is a fiddle: http://jsfiddle.net/xqy4dLbc/

I'm guessing the problem is with my HTML?

Answer 1

You need to add

display:block;

or

display:inline-block;

to .speech-box:before :

DEMO

The default display property of pseudo-element is inline (see MDN) and you can't set height on inline elements. Therefore the height:0; you set doesn't apply.