Speech bubble with arrow

Question

I have a project where I need to insert speech bubbles / message boxes. The general shape I am trying to achieve is this one :

Answer 1

SVG

This does not pass a hit-test as the transparent border is also clickable

This can be done using the pointer-events in svg.
pointer-events:visibleFill; Will only select the part where there is paint.

This example uses filter_box-shadow and is not supported by IE.
Also uses two shapes.

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

This example uses one path
Should be fully supported by IE.

html,
body {
  margin: 0;
  padding: 0;
}
.bubble {
  width: 150px;
  height: 150px;
}
.bubble-shape {
  stroke-width: 15;
  stroke: #ffffd;
  fill: #1e1;
}
.shape-text {
  color: black;
}