CSS Triangle + "After“实现

Question

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

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

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

Answer 1

将三角形更改为position: absolute;并将position: relative;添加到.box可以解决此问题。它似乎继承了盒子的高度。

Answer 2

如果你想这样做！

在div class框中插入div class箭头可能是唯一的解决方案。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>

​