Андрей

В бутстрапе нет для этого отдельного декоративного элемента, но что-то похожее есть в popovers
Как вариант, можно скопировать те же стили: https://jsfiddle.net/36PtU/4/

Сделайте подложку (отдельным элементом) белого цвета и меняйте ей прозрачность от нуля до одного.

Думаю, вам поможет статья: Как создавалась Айчиталка.

В таком случае принято верстать с картинками.
Техника придумана еще в прошлом тысячелетии — sliding doors

Проблема может быть в js, который вам ставит/убирает этот класс.

Во-первых нужно экранировать хтмл символы, такие как "<" и ">".
А потом уже думать в какой тег это обернуть.

Семантически правильно делать так:

<pre>
  <code> 
     тут код 
  </code>
</pre>

Но это на любителя.

upd:
Посмотрел в тостер. Так и сделано. Не сговаривались.

Если тень в один-два пикселя, то можно подложить элемент со смещением.
Для маленьких элементов, вроде уголков, это работает. Но в общем случае — нет.

Пример
codepen.io/standys/pen/wBZBRG

У вас в генерации html ошибка

... onclick="$('+object+').toggle();"> ....
//получается $(#lostpath)

А вообще лучше переписать, как минимум раздать переменным внятные имена

В целом уже ответили, но вот другой вариант, с 1 псевдоблоком:
codepen.io/standys/pen/GgwQeP

Самый простой способ сделать треугольную область это воспользоваться свойством border — на стыке горизонтальной и вертикальной границы получается наклонная.

Используйте inline-block, пример:
codepen.io/standys/pen/ByVQmL?editors=110

Зависит от того, чем вы генерируете выходной html.

Самое простое и очевидное: укажите ему margin-top: -16% (высота зеленого блока)

upd
Другое решение: перекомпоновать верстку, так чтобы все блоки обтекали желтый слева и справа:
codepen.io/standys/pen/VYxBJy?editors=110

Используйте кастомизированный бутстрап, он будет достаточно легким