<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="">

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-circle">

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-ellipse">

<img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/Harry-Potter-1-.jpg" alt="" class="clip-polygon">

img {
  width: 120px;
  margin: 20px;
}

.clip-circle {
  clip-path: circle(60px at center);
}
.clip-ellipse {
  clip-path: ellipse(60px 40px at center);
}
.clip-polygon {
  clip-path: polygon(5% 5%, 100% 0%, 100% 75%, 75% 75%, 75% 100%, 50% 75%, 0% 75%);
}

body {
  background: linear-gradient(
    to bottom,
    red,
    yellow
  );
}

body, html {
  height: 100%;
}