CSS Triangle + "After" Implementation - css

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.

Answer 2

if you want to do [this][1] !
insert an div class arrow in the div class box may be the only solution.
[1]: https://jsfiddle.net/ouvqLa3k/
html{
padding:50px
}
.box{
position : relative;
background:red;
height:40px;
width:100px;
border : 0px;
}
/*
.box:after{
position : relative;
content:"";
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
*/
.arrow{
width:0;
height:0;
border-top:20px solid transparent;
border-bottom:20px solid transparent;
border-left:20px solid green;
}
<div class="box">
<div class="arrow">
</div>
</div>
<br><br><br>
<div class="arrow">
</div>