如何让左边的div有一个小三角形突出到右边的div？

Question

大家好。我是HTML和CSS的新手，我想创建类似图片中的图形。两个矩形是div，我希望左边的div有一个小三角形突出到右边的div上。

我将不胜感激任何帮助和建议。

/ ****编辑**** /
好像我正在寻找的是伪元素！我不希望三角形干扰正确的div的内容。

我的英语有限，所以我不知道如何在Google搜索中说出我想要的内容。

非常感谢所有事情!!

Answer 1

您可以使用伪元素:after添加三角形，如下所示：

.arrow_box {
	position: relative;
	background: #888;
        width: 300px;
        height: 300px;
}

.arrow_box:after {
	left: 100%;
	top: 50%;
	border: solid transparent;
	content: "";
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border-color: rgba(0,0,0,0);
	border-left-color: #888;
	border-width: 30px;
	margin-top: -30px;
}

<div class="arrow_box"></div>