带有箭头的讲话泡泡

我有一个项目，我需要插入语音泡沫/消息框 。 我试图达到的一般形状是这样的：

.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; } 

 <div class="bubble">Speech bubble </div> <div class="triangle"> </div> 

由于透明边框也是可点击的，因此目前不能通过命中testing。

目标

• 点击框（可点击/可平放的区域）需要坚持形状的边界（这里的透明边框也是可以放置的，使之无效）。

• 我需要显示形状在各种内容（图像，gradents，文字…），

问题

我在操作这个形状时遇到的主要问题是：

• 能够根据指向元素的位置（上/左/右/下侧） 移动气泡周围的三angular形，
• 当需要强调时，在其周围添加边框或框阴影

有没有解决这些问题？

Answer 1

为了实现这一点，你应该考虑改变你的标记，以使您的html更高效。 这可以使用伪元素来实现。 我会逐一解决每个问题，并在我的回答结束时将其完全放在一起。

首先，

使用伪元素来避免额外的元素

你可以使用伪元素去除多余的.triangle div。 这不仅可以减less你的div数量，还可以帮助定位，因为你可以使用top: left: right:和bottom: css属性来根据你的主要元素进行定位。 这可以在下面看到：

 .oneAndOnlyDiv { height: 100px; width: 200px; border: 3px solid gray; background: lightgray; position: relative; } .oneAndOnlyDiv:before { content: ""; position: absolute; top: 100%; left: 20px; width: 0; border-top: 20px solid black; border-left: 20px solid transparent; border-right: 20px solid transparent; } 

 <div class="oneAndOnlyDiv">Main div</div> 

Answer 2

SVG

这不会通过命中testing，因为透明边框也是可点击的

这可以使用svg中的指针事件来完成。
pointer-events:visibleFill; 只会select有涂料的部分。

这个例子使用filter_box-shadow，IE不支持。
也使用两种形状。

 html, body { margin: 0; padding: 0; } .bubble { width: 150px; height: 150px; -webkit-filter: drop-shadow(5px 5px 0px #aaa); filter: drop-shadow(5px 5px 0px #aaa); } .bubble-shape { fill: #1e1; } .shape-text { color: black; } 

 <svg class="bubble" viewBox="0 0 110 110" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> <g class="bubble-shape" style="cursor:pointer; pointer-events:visibleFill;"> <rect x="10" y="10" width="90" height="90" rx="15" ry="15" /> <polygon points="20,94 40,94 30,105" /> </g> </svg>