CSS Triangle +"After"实现

Question

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

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

http://jsfiddle.net/TTVuS/

看起来像三角形.box被"切断"后我完全不知道为什么会这样.

我希望它看起来像.arrow.

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

ps这里是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;
}

Answer 1

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