HTML CSS
(a quick guide)
.crop { SET DESIRED DIMENSIONS width: 300px; height: 300px;
<div class="crop"></div>
SET BACKGROUND IMAGE background-image: url("IMG.JPG"); background-repeat: no-repeat; background-position: center; }
SET DESIRED DIMENSIONS .crop { width: 300px; height: 300px; position: relative; }
<div class="crop"> <img src="IMG.JPG"> </div>
CLIP - RECT(TOP, RIGHT, BOTTOM, LEFT) .crop img { clip: rect(0, 300px, 300px, 0); position: absolute; top: 0; left: 0; }
CLIP CIRCLE .cropA { clip-path: circle(30%); } CLIP TRIANGLE .cropB { clip-path: polygon(50% 0, 0 100%, 100% 100%); } CLIP DIAMOND .cropC { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
<img src="IMG.JPG" class="cropA"> <img src="IMG.JPG" class="cropB"> <img src="IMG.JPG" class="cropC">