Clip Path Inset Circle

Clip path inset circle?

I don't think you can achieve this with clip-path but you can certainly cut a hole in a div using the radial-gradient background images. This has much better browser support than clip-path too.

Note: This approach (and box-shadow ) will work only when the element that is covering the content below has a colored fill. If instead of sandybrown color, there needs to be another image on top then these approaches will not work because they don't actually cut a hole, they just mimic that effect.

.div-with-hole {  height: 100vh;  background: radial-gradient(circle at center, transparent 25%, sandybrown 25.5%);  background-size: 100% 100%;  background-position: 50% 50%;  transition: all 2s ease;}.div-with-hole:hover {  background-size: 400% 400%; /* should be 100% * (100 / transparent % of radial gradient */}body {  background: url(http://lorempixel.com/800/800/nature/1);  min-height: 100vh;  margin: 0;  padding: 0;}

<div class='div-with-hole'></div>

Clip-path inset circle

You can do this using mask and not clip-path

img {  border-radius:50%;  -webkit-mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);          mask:radial-gradient(farthest-side,transparent 15%,#fff 16%);}
body {  background:linear-gradient(to right,gray,yellow);}

<img src="https://i.picsum.photos/id/1003/400/400.jpg">

clip-path leaves straight lines around my circle

Add overflow:hidden to .story__shape

.u-center-text {
  text-align: center !important;
}

.u-margin-bottom-small {
  margin-bottom: 1.5rem !important;
}

.u-margin-bottom-medium {
  margin-bottom: 4rem !important;
}

.u-margin-bottom-big {
  margin-bottom: 8rem !important;
}

.u-margin-top-big {
  margin-top: 8rem !important;
}

.u-margin-top-huge {
  margin-top: 10rem !important;
}

*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: inherit;
}

html {
  font-size: 62.5%;
}

body {
  padding: 3rem;
  font-family: "Lato", sans-serif;
  font-weight: 400;
  line-height: 1.7;
  color: #777;
  box-sizing: border-box;
}

.story {
  width: 75%;
  margin: 0 auto;
  box-shadow: 0 3rem 6rem rgba(0, 0, 0, 0.1);
  background-color: #fff;
  border-radius: 3px;
  padding: 6rem;
  padding-left: 9rem;
  font-size: 1.6rem;
  transform: skewX(-12deg);
  margin-bottom: 10rem;
}

.story__shape {
  width: 15rem;
  height: 15rem;
  float: left;
  -webkit-shape-outside: circle(50% at 50% 50%);
  shape-outside: circle(50% at 50% 50%);
  -webkit-clip-path: circle(50% at 50% 50%);
  clip-path: circle(50% at 50% 50%);
  transform: translateX(-3rem) skewX(12deg);
  overflow:hidden;
}

.story__img {
  height: 100%;
  transform: scale(2.5);
  transition: all 0.4s;
  overflow: hidden;
}

.story__text {
  transform: skewX(12deg);
}

.story__caption {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, 20%);
  color: #fff;
  font-size: 1.7rem;
  text-align: center;
  opacity: 0;
  transition: all 0.4s;
}

.story:hover .story__caption {
  opacity: 1;
  transform: translate(-50%, -50%);
}

.story:hover .story__img {
  transform: scale(2);
  filter: blur(3px) brightness(80%);
}

<div class="row">
  <div class="story">
    <figure class="story__shape">
      <img src="https://images.unsplash.com/photo-1595169269488-02a14b7197c1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9" alt="Person on a tour" class="story__img">
      <figcaption class="story__caption">Mary Smith</figcaption>
    </figure>
    <div class="story__text">
      <h3 class="heading-tertiary u-margin-bottom-small">I had the best week ever with my family</h3>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus quam nisi exercitationem omnis earum qui. Aperiam, ipsum sapiente aspernatur libero repellat quis consequatur ducimus
        quam nisi exercitationem omnis earum qui.
      </p>
    </div>
  </div>
</div>

Clip path circle small gap issue

After some investigating, I found out it was due to a small scale from 105% to 100% and the clip-path circle which was getting bigger.

Adding translate-z did not solve this issue, unfortunately. I removed the small scale since it didn't add that much effect.

To fix the example that I sent is easy to solve just add 1% to the highest element circle path or set a delay on the first element.

.App {
  font-family: sans-serif;
  text-align: center;
}

@keyframes mymove {
  from {
    clip-path: circle(0%);
  }
  to {
    clip-path: circle(50%);
  }
}

<div
  style="
    height: 100vh;
    background: red;
    position: fixed;
    inset: 0px;
    animation: mymove 20s infinite;
    animation-delay: 0.05s;
  "
  className="App"
>
  <div
    style="
      position: fixed;
      inset: 0px;
      background: yellow;
      animation: mymove 20s infinite;
    "
  ></div>
</div>

clip-path: Combine circle and polygon

mask can do it:

.box {
  width:200px;
  height: 400px;
  -webkit-mask:
    /* the circle*/
    radial-gradient(circle closest-side,#000 98%,#0000),
    /* the line             width=60% */
    linear-gradient(#000 0 0) 50%/60% 100% no-repeat;
  background:linear-gradient(red,blue);
}

<div class="box"></div>

CSS Clip Path align circle to left side

The original question was: can clip-path: circle() be aligned left in a none squared rectangle.

The answer is mostly no, unless you align it manually with pixels. E.g.: clip-path: circle(25px at 25px 50%);.

Aligning at 0 creates a half circle, therefore it has to be positioned exactly at 1x radius (25px in this example).

This works, however, only on fixed dimensioned objects. No luck for more dynamic boxes.

How can I combine a circle in a polygon using clip-path and add a shadow

It is possible to 'cut holes' using the mask-image property and radial-gradients.

This snippet uses your code but replacing the clip-path with circle radial-gradient masks. Obviously you can change the percentages depending on hole-size required.

body {
  background: cyan;
}

.ticket {
  background-color: blue;
  height: 100px;
  width: 200px;
  border-radius: 10px;
  box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
  --mask1: radial-gradient(circle at 0 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
  --mask2: radial-gradient(circle at 100% 50%, transparent 0, transparent 5%, black 5%, black 90%, transparent 90%, transparent);
  /* webkit needed for Chrome */
  -webkit-mask-image: var(--mask1), var(--mask2);
  mask-image: var(--mask1), var(--mask2);
}

<div class="ticket"></div>