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

Question

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

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

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

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

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

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

Answer 1

Выполнил таким образом:

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

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

БЛОГ НА HUSL

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

Ответы (1 шт):