<section class="examples">
  <figure>
    <div class="original-image"></div>
    <figcaption>
      <p>Original Image</p>
    </figcaption>
  </figure>
  <figure>
    <div class="original-image basic-shape-inset"></div>
    <figcaption>
      <p>Using <code>clip-path: inset(10px 30px 20px 40px)</code> for cropping</p>
    </figcaption>
  </figure>
  <figure>
    <div class="original-image basic-shape-circle"></div>
    <figcaption>
      <p>Using <code>clip-path: clip-path: circle(75px at 120px 120px)</code> for cropping</p>
      <p>I've never met the syntax using <code>at</code> before. It positions the center of a cropping circle</p>
    </figcaption>
  </figure>
  <figure>
    <div class="original-image basic-shape-ellipse"></div>
    <figcaption>
      <p>Using <code>clip-path: ellipse(175px 80px)</code> for cropping</p>
      <p>Specifying with <code>at</code> is also supported here</p>
    </figcaption>
  </figure>
  <figure>
    <div class="original-image basic-shape-polygon"></div>
    <figcaption>
      <p>Using <code>clip-path: polygon(0% 100%, 0% 0%, 100% 0%, 25% 50%, 100% 100%)</code> for cropping</p>
    </figcaption>
  </figure>
  <figure>
    <div class="original-image basic-shape-path"></div>
    <figcaption>
      <p>Using <code>clip-path: path("M 100 400 L 100,200 A 5,5 0,0,1 300,200 L 300 400 Z")</code> for cropping</p>
      <p>Using <code>path</code> gives an opportunity to crop using arcs</p>
    </figcaption>
  </figure>
</section>

:root {
  font-family: sans-serif;
}

*,
*:before,
*:after {
  box-sizing: border-box;
}

.examples {
  display: flex;
  flex-wrap: wrap;
}

figure {
  width: min-content;
}

.original-image {
  width: 400px;
  height: 300px;

  background-image: url(https://ucarecdn.com/0788ee97-3911-45eb-a55c-f05d32231571/-/crop/100px50p/bottom/-/preview/400x300/);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}

.basic-shape-inset {
  clip-path: inset(10px 30px 20px 40px);
}

.basic-shape-circle {
  clip-path: circle(75px at 120px 120px);
}

.basic-shape-ellipse {
  clip-path: ellipse(175px 80px);
}

.basic-shape-polygon {
  clip-path: polygon(
    0% 100%,
    0% 0%,
    100% 0%,
    25% 50%,
    100% 100% /* Polygon closes automatically. */
  );
}

.basic-shape-path {
  clip-path: path("M 100 400 L 100,200 A 5,5 0,0,1 300,200 L 300 400 Z");
}