带三角缺口的边框_html/css_WEB-ITnose

以前看漫画的时候如果有对话内容，一般会有一个边框，然后带着一个三角从说话人的身上引出。类似下图这样：

应该有很多方法来实现，这里提供的办法就是创造一个边框，然后用两个三角覆盖。效果如下：

为了方便理解，我给body加了个黑色背景，是这样：

代码如下：