Html 如何使左侧div有一个小三角形突出到右侧div中？

大家好。我是新的HTML和CSS，我想创造一些像图片中的数字。这两个矩形是div，我想要左div有一个小三角形突出到右边的div上

如果有任何帮助和建议，我将不胜感激

/****编辑****/
看来我要找的是伪元素！我不希望三角形干扰右div的内容

我的英语是有限的，所以我不知道如何在谷歌搜索中表达我想要的

---

非常感谢你所做的一切

您可以使用伪元素

：after

添加三角形，如下所示：

.arrow\u框{
位置：相对位置；
背景：#888；
宽度：300px；
高度：300px；
}
.箭头框：在{
左：100%；
最高：50%；
边框：实心透明；
内容：“；
身高：0；
宽度：0；
位置：绝对位置；
指针事件：无；
边框颜色：rgba（0,0,0,0）；
左边框颜色：#888；
边框宽度：30px；
利润上限：-30px；
}

---

定义“突出”？它应该干扰内容的流动吗？如果没有，您可能会查看z顺序或背景图像到目前为止您尝试了什么？请自己尝试，遇到困难时回来分享您的尝试。提示：查看

：：after

CSS伪选择器。具有绝对位置的伪元素。。。做一个谷歌小搜索，这是我不知道的一个常见的伪元素。我会学到更多。谢谢你的建议。对不起，我不能投票，因为我没有足够的声誉（–用户2731449 40秒前编辑