Clip-path

Cómo usar clip-path con CSS

by J. Vázquez

HTML

<div class="imgClip">
<img class="img1" src="https://www.jvldesign.es/uploads/nft-skeleton.jpg" >
<img class="img2" src="https://www.jvldesign.es/uploads/nft-skeleton.jpg" >
<img class="img3" src="https://www.jvldesign.es/uploads/nft-skeleton.jpg" >
<img class="img4" src="https://www.jvldesign.es/uploads/nft-skeleton.jpg" >
</div>

CSS

.imgClip img {
  margin:2% 2%;
  width:42%;
}
.imgClip .img1 {
clip-path: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
}
.imgClip .img2 {
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);

}
.imgClip .img3 {
clip-path: polygon(0% 0%, 75% 0%, 100% 50%, 75% 100%, 0% 100%);
}
.imgClip .img4 {
clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);

}