Border with triangle gap and border with triangle gap

Border with triangle gap and border with triangle gap

In the past, when reading cartoons, if there was a conversation, there would usually be a border, and a triangle would be taken out from the speaker. Similar to this:

There should be many ways to achieve this. The solution provided here is to create a border and then overwrite it with two triangles. The effect is as follows:

For ease of understanding, I added a black background to the body, as shown in the following code:

The Code is as follows:

<! Doctype html>