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

Question

我使用 clip-path 创建了一个圆圈，我的图像可以在其中缩小并对其应用滤镜。

但由于某些原因，直线在悬停过渡期间可见。

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>

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

clip-path leaves straight lines around my circle

css

google-chrome

transition

clip-path