Clever Geek Handbook

CSS triangle doesn't make sense

Here's what's going on:

Stubby triangle!

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 the fiddle: http://jsfiddle.net/xqy4dLbc/

I'm guessing the problem is with my HTML?

+3


source to share


1 answer


You need to add

display:block;

or

display:inline-block;


to .speech-box:before

:

DEMO

The default display property for a pseudo element inline

( see MDN ) and you cannot set the height for inline elements. Therefore, the installed one height:0;

does not apply.

+4


source






More articles:


All Articles