如何使用：：after定位CSS三角形？

我使用：：after创建了一个带有底部箭头的div。以下是HTML代码：

主题
好,好

下面是CSS：

。侧栏资源类别{
高度：50px；
边缘底部：20px；
背景色：#e8e8e8；
字号：600；
线高：50px；
文本对齐：居中；
字体大小：20px；
}
.侧边栏资源类别：：之后{
内容：''；
位置：绝对位置；
左：42%；
最高：100%；
宽度：0；
身高：0；
左边框：20px实心透明；
右边框：20px实心透明；
边框顶部：20px实心#e8e8e8；
明确：两者皆有；
}

结果如下：

---

我希望箭头位于灰色div的最底部。我不希望在div和底部箭头之间有内容。你知道我怎么做吗？

只需将

位置：relative

添加到父元素

。侧边栏资源类别

说明：after elements位置基于其父元素，在您的示例中，您可能有一个.sidebar-res的父元素。。。它有一个设定的高度，因此它呈现在它的正下方。正在添加相对于.sidebar-res的位置。。。使after元素移动到其父元素的100%，该父元素现在成为.sidebar-res。。。因为它的位置设置为相对。我不知道该如何解释，但这是预期的行为

阅读有关主题的更多信息：

添加一个类：

.com_box:after {
     content: '';
    position: absolute;
    left: 18px;
    top: 50px;
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    clear: both;

}

---

更新了您的JSFIDLE:

您可以设置三角形的位置参见此代码以供参考

.top-left-corner {
    width: 0px;
    height: 0px;
    border-top: 0px solid transparent;
    border-bottom: 55px solid transparent;
    border-left: 55px solid #289006;
    position: absolute;
    left: 0px;
    top: 0px;
}

---

可能的重复不是重复。这个问题与定位

：：在
伪元素之后，而不是构建三角形本身有关。为了提供更多信息，它与.sidebar resources categories:：after上的
位置：绝对
和
顶部：100%
属性有关。绝对定位元素根据最近的父元素放置，该父元素在DOM（主体）中具有
位置：relative、
或最高父元素。因此，您将箭头的上边缘放置在父元素高度的100%。当您添加位置：相对于.sidebar资源类别时，箭头将放置该条100%的高度；至：选择器后，使箭头水平居中对齐！如何用边框包围矩形加三角形集合？使用
框阴影
？你会怎么做？