Image Crop

Use clip-path to crop images into various shapes without image editing software. Non-destructive image cropping.

Key Concepts

• Clipping images
• Non-destructive cropping
• Various shape crops

Technical Details

img {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
/* Creates diamond shape without image editing */
/* Non-destructive cropping