clip-path

templates

by Oleh Kotsubko

HTML

<img src="https://ecotechnopark.techiia.com/img/vis_1.jpg" alt="" class="image circle">
<img src="https://ecotechnopark.techiia.com/img/vis_2.jpg" alt="" class="image inset">
<img src="https://ecotechnopark.techiia.com/img/vis_3.jpg" alt="" class="image polygon">
<img src="https://ecotechnopark.techiia.com/img/vis_4.jpg" alt="" class="image ellipse">

CSS

*{
  margin: 0;
  padding: 0;
}

.image {
  display: block;
  max-width: 100%;
  height: auto;
}

.circle {
   clip-path: circle(320px at calc(50% - 260px) 50%);
}

.inset {
  clip-path: inset(82px 60px 60px 85px);
}

.polygon {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

.ellipse {
  clip-path: ellipse(65px 30px at 125px 40px);
}