@sasha_jarvi

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

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

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


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

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

Треугольник - так
29022318b6.jpg

Однако не вполне понятно, как это выполнить. Заранее спасибо за ответ.
Код: https://jsfiddle.net/4gy7waf1/
  • Вопрос задан
  • 75 просмотров
Решения вопроса 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);
}
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы