CSS 三 Angular 形 + "After"实现

Question

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

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

https://jsfiddle.net/TTVuS/

.box 之后的三 Angular 形似乎被“切断”了，我完全不知道为什么会这样。

我希望它看起来像.arrow。

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

附注如果 Jsfiddle 速度慢或再次不可用，这里是 css:

.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

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