Aksigera

У вас все в порядке с кодом, просто изображение не масштабируется относительно малого круга. Посмотрите здесь codepen.io/anon/pen/adRLXK

codepen.io/anon/pen/vLVePw - решение. Используется блок .helper, аналогичный по размерам и позиционированию с .service__link. У ссылки мы забираем position: relative и передаем .helper-у. Таким образом, внутренний абсолютно позиционированный элемент рассчитывает свое положение не от изменяющихся границ ссылки, а от постоянных границ внешнего блока-хелпера

Треугольник отдельно сверстан дивом + :before, можно сделать, используя в :before свойство transform

.comment {
  position: relative; }
  .comment .block {
    position: relative;
    border: 1px cadetblue solid;
    z-index: 1;
    height: 100px;
    width: 400px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    border-top-right-radius: 10px; }
  .comment .block__triangle {
    top: -12px;
    display: block;
    height: 12px;
    width: 20px;
    z-index: 2;
    border-bottom: white 1px solid;
    border-left: solid 1px cadetblue;
    border-top: 0;
    position: absolute; }
  .comment .block__triangle:after {
    top: -15px;
    content: "";
    display: block;
    border-bottom-left-radius: 150px;
    border-left: solid 1px cadetblue;
    border-bottom: 1px solid cadetblue;
    border-top: transparent;
    height: 12px;
    width: 20px; }