剪辑路径在我的圈子周围留下直线

Question

我使用剪辑路径创建了一个圆圈，我的图像可以在其中缩小并应用过滤器。

但由于某种原因，在悬停过渡期间可以看到直线。

Wierd lines around image

.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);
}

.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>

Answer 1

将overflow:hidden 添加到.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>