我有一个项目,我需要插入语音泡沫/消息框.我试图实现的一般形状是这样的:

.bubble {
height: 100px;
width: 200px;
border: 3px solid gray;
background: lightgray;
position: relative;
cursor:pointer;
}
.triangle {
width: 0;
border-top: 20px solid black;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
cursor:pointer;
}Run Code Online (Sandbox Code Playgroud)
<div class="bubble">Speech bubble
</div>
<div class="triangle">
</div>Run Code Online (Sandbox Code Playgroud)
这当前没有通过命中测试,因为透明边框也是可点击的.
目标
命中框(可点击/可挖掘区域)需要坚持形状的边界(此处的透明边框也可以悬空,使此无效).
我需要在各种内容(图像,等级,文本......)上显示形状,
问题
操作这个形状时我遇到的主要问题是:
无论如何解决这些问题?