CSS - Triangulos con box shadows

Creating triangles using the edges can lead to unwanted results like those you encounter with box-shadow . But, to do what you want, you do not have to use the edges to create those figures. You could create a square of the width you want and then rotate it 45 degrees so that it forms a "diamond".

Positioning that diamond in such a way that it is below your text bubble and you only see one half ... you already have the triangle you were looking for! Then the idea would be:

• Instead of using transparent borders, use the box with a square shape (width = high).
• Rotate it using transform: rotate(45deg)
• Give it a width and height somewhat greater than what you gave it before (there is a trigonometric formula to get the exact value ... I have been more simplistic and I have put it to eye)
• Use calc to position the item, the position will be calculated from half the width / height you gave to the box.

The good thing is that, since you are using the block itself and not transparent borders, the properties will still be there and working better than before (although there may still be some "collateral damage", some of which could be corrected). playing with the values of the positions of the box or the shadow).

The code of the arrows would look like this:

.tooltip-bubble .arrow {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border:0;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background:#706f6f;
  transform:rotate(45deg);
  z-index:-1;
  left: -3px;
  top:calc(50% - 8px);
}

.tooltip-bubble .arrow.down {
  top: calc(100% - 8px);
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.up {
  top: -8px;
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.right {
  left:auto;
  right:-3px;
}

And here's a demo:

var botones = document.querySelectorAll("button");
for (var x = 0; x < botones.length; x++) {
  botones[x].addEventListener("click", function() {
    document.querySelector(".arrow").className = "arrow " + this.dataset.lado;
  });
}

/* Generated by less 2.5.1 */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


/* Demo of the tool-tip CSS */

.tooltip {
  text-decoration: underline;
  color: #37b9b5;
  cursor: default;
}

.tooltip-bubble {
  position: absolute;
  z-index: 1;
  padding: 5px 10px;
  color: #fff;
  width: auto;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background-color: transparent;
  border-radius: 10px;
  margin:50px; /* añadido para que se vea mejor, bórralo después */
}

.tooltip-bubble div {
  position: relative;
  z-index: 1;
  font-size: 12px;
}

.tooltip-bubble::before {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #706f6f;
  border-radius: 10px;
}

.tooltip-bubble .arrow {
  content: '';
  display: block;
  position: absolute;
  width: 16px;
  height: 16px;
  border:0;
  box-shadow: 7px 7px 11px 0px rgba(112, 111, 111, 0.3);
  background:#706f6f;
  transform:rotate(45deg);
  z-index:-1;
  left: -3px;
  top:calc(50% - 8px);
}

.tooltip-bubble .arrow.down {
  top: calc(100% - 8px);
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.up {
  top: -8px;
  left: calc(50% - 8px);
}

.tooltip-bubble .arrow.right {
  left:auto;
  right:-3px;
}

<div class="tooltip-bubble">
  <div>Tutorial de uso</div>
  <div class="arrow down"></div>
</div>

<button data-lado="left">Izquierda</button>
<button data-lado="right">Derecha</button>
<button data-lado="up">Arriba</button>
<button data-lado="down">Abajo</button>