Как можно обрезать фотографии таким образом?

Существует несколько способов обрезать фотографии в различных формах с использованием кода.

1. Используя CSS clip-path: 
   - Создайте изображение с помощью тега <img> или CSS background-image.
   - Создайте отдельный элемент (например, <div>), который будет использоваться как обрезающая фигура.
   - Примените CSS свойство clip-path к элементу изображения или его родителю, указав форму обрезки, например, "polygon(50% 0, 100% 50%, 50% 100%, 0 50%)".
   
   Пример:
   ```html
   <div class="image-container">
     <div class="clip-shape"></div>
     <img src="your-image.jpg" alt="">
   </div>
   ```
   ```css
   .image-container {
     position: relative;
   }
   
   .clip-shape {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
   }
   ```
   
2. Используя SVG:
   - Создайте SVG элемент, который будет представлять обрезающую форму.
   - Вставьте изображение в SVG, используя тег <image>.
   - Установите высоту и ширину SVG элемента, чтобы обрезать изображение.
   
   Пример:
   ```html
   <svg width="300" height="300">
     <clipPath id="clipShape">
       <polygon points="100,0 200,0 300,100 300,200 200,300 100,300 0,200 0,100"></polygon>
     </clipPath>
     
     <image xlink:href="your-image.jpg" x="0" y="0" width="300" height="300" clip-path="url(#clipShape)"></image>
   </svg>
   ```
   
3. Используя JavaScript и HTML canvas:
   - Создайте <canvas> элемент с соответствующими размерами.
   - Создайте функцию для рисования фигуры внутри canvas с использованием методов ctx.beginPath(), ctx.moveTo(), ctx.lineTo(), ctx.closePath() и т. д.
   - Загрузите изображение и нарисуйте его внутри canvas.
   - Примените контекст обрезки (ctx.clip()) и отобразите только область, ограниченную вашей фигурой.
   
   Пример:
   ```html
   <canvas id="canvas" width="300" height="300"></canvas>
   ```
   ```javascript
   const canvas = document.getElementById('canvas');
   const ctx = canvas.getContext('2d');
   
   const clipShape = new Path2D();
   clipShape.moveTo(100, 0);
   clipShape.lineTo(200, 0);
   clipShape.lineTo(300, 100);
   clipShape.lineTo(300, 200);
   clipShape.lineTo(200, 300);
   clipShape.lineTo(100, 300);
   clipShape.lineTo(0, 200);
   clipShape.lineTo(0, 100);
   clipShape.closePath();
   
   const image = new Image();
   image.onload = function() {
     ctx.save();
     ctx.clip(clipShape);
     ctx.drawImage(image, 0, 0);
     ctx.restore();
   };
   image.src = 'your-image.jpg';
   ```

Необходимо уточнить форму обрезки, чтобы использовать соответствующие параметры в CSS, SVG или JavaScript. Вы можете настроить эти примеры в соответствии с вашими требованиями.

статья 

 полезный ресурс-инструмент