Clip-Path on Chrome Leaves a Strange Line on the Edge

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>

webkit-clip-path mysterious line in chrome when scrollbar present

You can hide this line by using the following snippet.

.container {

  background: #ff0000;

  width: 400px;

  margin: 0 auto;

}

.block {

  background: #fff;

  height: 400px;

  -webkit-clip-path: polygon(0px 20%, calc(100% + 1px) 0px, calc(100% + 1px) 100%, 0px 100%);

  

  /** or this... 

  -webkit-clip-path: polygon(0px 20%, 101% 0px, 101% 100%, 0px 100%);

  */

}

<div class="container">

  <div class="block"></div>

</div>

SVG Mask is bleeding on canvas edges

It does appear as if Chrome has trouble applying a clipping path to images. It seems to be a little worse when the image is moving - as in your case.

However there is an easy fix. Use a <mask> instead.

Or I expect switching the gleam from an image to an SVG object with a linearGradient would also work just fine.

Example using a mask instead of a clip path

(Note that I've trimmed the SVG down to just show the important bits)

.container {
    background: #671717;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    min-height: 260px;
}

#fun-stuff-8-goooood-one-gleam_to {
    animation: fun-stuff-8-goooood-one-gleam_to__to 3600ms linear 1 normal forwards
}

@keyframes fun-stuff-8-goooood-one-gleam_to__to {
    0% {
        transform: translate(-158.186752px, 357px)
    }
    100% {
        transform: translate(707.836896px, 139px)
    }
}

#fun-stuff-8-goooood-one {
    max-width: 300px
}

<body>
<div class="container">
<svg cache-id="712f8e74e2a84671a5d2ce2936cc88e4" id="fun-stuff-8-goooood-one" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="12 102 535 326" shape-rendering="geometricPrecision" text-rendering="geometricPrecision">
  <g id="fun-stuff-8-goooood-one-clip-group" mask="url(#fun-stuff-8-goooood-one-clipping-paths)">
    <mask id="fun-stuff-8-goooood-one-clipping-paths">
      <path id="fun-stuff-8-goooood-one-gleam-mask" d="M534.590000,171.480000C530.700000,176.920000,495.170000,225.230000,446.060000,246.020000C445.237815,246.365879,444.367920,246.585039,443.480000,246.670000C437.040000,247.310000,429.420000,248.030000,420.790000,248.830000C406.090000,280.370000,368.240000,290.700000,334.670000,299.830000C310.940000,306.310000,288.520000,312.430000,274.990000,324.460000C271.650027,327.445836,266.599973,327.445836,263.260000,324.460000C249.730000,312.460000,227.310000,306.310000,203.570000,299.830000C170.010000,290.670000,132.160000,280.340000,117.460000,248.830000C108.830000,248.030000,101.220000,247.310000,94.770000,246.670000C93.884232,246.578738,93.017584,246.352802,92.200000,246C43.070000,225.200000,7.550000,176.900000,3.660000,171.460000C1.461420,168.389667,1.461420,164.260333,3.660000,161.190000C7.550000,155.750000,43.080000,107.450000,92.200000,86.660000C93.018235,86.310929,93.884818,86.088383,94.770000,86C100.850000,85.400000,107.990000,84.720000,116.040000,84C129.590000,49.870000,168.800000,39.160000,203.580000,29.670000C227.310000,23.190000,249.730000,17.070000,263.260000,5.040000C266.591312,2.036791,271.648301,2.019561,275,5C288.530000,17,310.950000,23.150000,334.680000,29.630000C369.460000,39.120000,408.680000,49.820000,422.220000,83.960000C430.270000,84.700000,437.410000,85.380000,443.490000,85.960000C444.378421,86.048303,445.248312,86.270834,446.070000,86.620000C495.200000,107.420000,530.720000,155.710000,534.600000,161.150000C536.824366,164.235294,536.820336,168.399018,534.590000,171.480000Z" transform="matrix(1 0 0 1 10.24000000000000 100.52000000000000)" fill="rgb(255,255,255)" stroke="none" stroke-width="1"/>
    </mask>
    <path id="fun-stuff-8-goooood-one-border-b" d="M534.590000,171.480000C530.700000,176.920000,495.170000,225.230000,446.060000,246.020000C445.237815,246.365879,444.367920,246.585039,443.480000,246.670000C437.040000,247.310000,429.420000,248.030000,420.790000,248.830000C406.090000,280.370000,368.240000,290.700000,334.670000,299.830000C310.940000,306.310000,288.520000,312.430000,274.990000,324.460000C271.650027,327.445836,266.599973,327.445836,263.260000,324.460000C249.730000,312.460000,227.310000,306.310000,203.570000,299.830000C170.010000,290.670000,132.160000,280.340000,117.460000,248.830000C108.830000,248.030000,101.220000,247.310000,94.770000,246.670000C93.884232,246.578738,93.017584,246.352802,92.200000,246C43.070000,225.200000,7.550000,176.900000,3.660000,171.460000C1.461420,168.389667,1.461420,164.260333,3.660000,161.190000C7.550000,155.750000,43.080000,107.450000,92.200000,86.660000C93.018235,86.310929,93.884818,86.088383,94.770000,86C100.850000,85.400000,107.990000,84.720000,116.040000,84C129.590000,49.870000,168.800000,39.160000,203.580000,29.670000C227.310000,23.190000,249.730000,17.070000,263.260000,5.040000C266.591312,2.036791,271.648301,2.019561,275,5C288.530000,17,310.950000,23.150000,334.680000,29.630000C369.460000,39.120000,408.680000,49.820000,422.220000,83.960000C430.270000,84.700000,437.410000,85.380000,443.490000,85.960000C444.378421,86.048303,445.248312,86.270834,446.070000,86.620000C495.200000,107.420000,530.720000,155.710000,534.600000,161.150000C536.824366,164.235294,536.820336,168.399018,534.590000,171.480000Z" transform="matrix(1 0 0 1 10.24000000000000 100.52000000000000)" fill="rgb(128,128,255)" stroke="none" stroke-width="1"/>
 
    <g id="fun-stuff-8-goooood-one-gleam_to" transform="translate(0,357.723397)"><image id="fun-stuff-8-goooood-one-gleam" width="530" height="557" xlink:href="https://i.postimg.cc/NfMvQ6Kp/streak.png" preserveAspectRatio="xMidYMid meet" transform="translate(-265,-278.500000)"/></g></g></svg>
</div>
</body>

HTML CSS - Angled objects have unsharp edges

With the help of everyone here I came to the final solution of applying the suggested -webkit-clip-path() and clip-path() (answered by grinmax).

It gives clear and sharp edges on the angled objects.

Thanks for everyone's help!

The code is:

#container {

    position: absolute;

    width: 100%;

    height: 100%;

    display: block;

}

#shape {

    position: absolute;

    z-index: 6;

    background: #42145f;

    width: 40%;

    height: 55%;

    left: 0px;

    top: 0px;

    -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);

 clip-path: polygon(0 0, 0 100%, 100% 0);

}

#shape2 {

    position: absolute;

    z-index: 5;

    background: #c50084;

    width: 100%;

    height: 35%;

    left: 0px;

    top: 0px;

    -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);

    clip-path: polygon(0 0, 0 100%, 100% 0);

}

#shape3 {

    position: absolute;

    z-index: 4;

    background: #6e2c6b;

    width: 37%;

    height: 73%; 

    left: 0px;

    top: 27%;

    -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%);

    clip-path: polygon(0 0, 0 100%, 100% 100%);

}

#shape4 {

    position: absolute;

    z-index: 3;

    background: #b71234;

    width: 100%;

    height: 14%;

    left: 0;

    top: 86%;

    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);

    clip-path: polygon(0 100%, 100% 100%, 100% 0);

}

#shape5 {

    position: absolute;

    z-index: 0;

    background: #8d1b3d;

    width: 20%;

    height: 78%;

    left: 80%;

    top: 22%;

    -webkit-clip-path: polygon(0 100%, 100% 100%, 100% 0);

    clip-path: polygon(0 100%, 100% 100%, 100% 0);

}

#shape6 {

    position: absolute;

    z-index: 2;

    background: #ff5800;

    width: 22%;

    height: 59%;

    left: 78%;

    top: 0;

    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);

    clip-path: polygon(0 0, 100% 100%, 100% 0);

}

#shape7 {

    position: absolute;

    z-index: 1;

    background: #fadc41;

    width: 30%;

    height: 54%;

    left: 70%;

    top: 0;

    -webkit-clip-path: polygon(0 0, 100% 100%, 100% 0);

    clip-path: polygon(0 0, 100% 100%, 100% 0);

}

<div id="container">

 <div id="shape"></div>

 <div id="shape2"></div>

 <div id="shape3"></div>

 <div id="shape4"></div>

 <div id="shape5"></div>

 <div id="shape6"></div>

 <div id="shape7"></div>

</div>

How to add border in my clip-path: polygon(); CSS style

Can border be applied to a clipped element along the clip path?

No, adding border property to the clipped element would not apply the borders along the clipped path because the border is applied to the original rectangle (or square) container before the clip-path is applied and so, it also gets clipped out. You can see this in the below snippet:

div {
  display: inline-block;
  height: 200px;
  width: 200px;
  border: 3px solid;
  background: darkseagreen;
}
div + div {
  -webkit-clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
  clip-path: polygon(50% 0%, 100% 100%, 100% 0%);
}

<div></div>
<div></div>

---

Related Topics