Как выполнить clip-path либо svg-маску для обрезки изображения?

Question

[sasha_jarvi]

Имеется следующий код:

<div class="img-wrap">
  <img src="https://i.imgur.com/1UFBLw8.png" alt="">
</div>

Необходимо обрезать изображение таким образом -
.

Окружность выглядит так:


Треугольник - так


Однако не вполне понятно, как это выполнить. Заранее спасибо за ответ.
Код: https://jsfiddle.net/4gy7waf1/

Answer 1

[sasha_jarvi]

Выполнил так:

<div class="img-wrap">
  <img src="https://i.imgur.com/1UFBLw8.png" alt="">
</div>

<svg width="0" height="0">
  <defs>
    <clipPath id="myClip">
      <circle cx="48" cy="48" r="48"/>
      <polygon points="48,96 70,77 98,96" />
    </clipPath>
  </defs>
</svg>

.img-wrap {
  width: 98px;
  height: 98px;
  clip-path: url(#myClip);
}