CSS 三角形 + “之后”实施

我尝试用 CSS 创建一个三角形，它看起来不错，但是我现在在一个盒子之后实现它时遇到了问题。

看看我的例子，你就会明白我的意思：

https://jsfiddle.net/TTVuS/ https://jsfiddle.net/TTVuS/

好像是后面的三角形.box被“切断”，我完全不知道为什么会发生这种情况。

我希望它看起来像.arrow.

我试图改变盒子、三角形等的尺寸，但没有任何效果。

附注这是 css，以防 Jsfiddle 速度慢或再次不可用：

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

将三角形改为position: absolute;并添加position: relative; to the .box修复它。它似乎继承了盒子的高度。