Question

I have tried to create a triangle with CSS and it looks good, however I have now got a problem implementing it after a box.

Check out my example and you will see what I mean:

https://jsfiddle.net/TTVuS/

It seems like the triangle after .box gets "cut off" and I have absolutely no idea why this happens.

I want it to look like .arrow.

I have tried to change dimensions of the box, the triangle etc. but nothing worked.

p.s. here is the css in case Jsfiddle is slow or not available again:

.box{
    background:red;
    height:40px;
    width:100px;
}

/*the triangle but its being cut off*/
.box:after{
    content:"";
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}

/*the triangle how it should look like*/
.arrow{
    width:0;
    height:0;
    border-top:20px solid transparent;
    border-bottom:20px solid transparent;
    border-left:20px solid green;
}

Answer 1

Changing the triangle to position: absolute; and adding position: relative; to the .box fixes it. It seems to be inheriting the height of the box.