CSS Triangle + “After” 实现答案

【问题标题】：CSS Triangle + "After" ImplementationCSS Triangle + “After” 实现
【发布时间】：2021-04-12 19:12:45
【问题描述】：

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

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

.box 之后的三角形似乎被“切断”了，我完全不知道为什么会发生这种情况。

我希望它看起来像 .arrow。

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

附言如果 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;
}

【问题讨论】：

标签： css

【解决方案1】：

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

【讨论】：

成功了！非常感谢！我会尽快接受答案（3 分钟）:)

【解决方案2】：

如果你想做[这个][1]！

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

【讨论】：