4

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

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

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

введите сюда описание изображения

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

введите сюда описание изображения

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

введите сюда описание изображения

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

1 ответ 1

6

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

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

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.