CSS Triangle + "After" Implementation

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.