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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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