White line between an element and svg shape - html

Question

Hi guys, i'm using svg shaper generated from shapedivider an how you can see, there is a white line and i don't why its there and how to remove it. Could you please help me?
there is the code of the shape divider:
.custom-shape-divider-bottom-1640714253 {
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1640714253 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 115px;
}
.custom-shape-divider-bottom-1640714253 .shape-fill {
fill: #FF2E63;
}
<div class="custom-shape-divider-bottom-1640714253" id="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>

Answer 1

Here are four examples. The first two uses an SVG as background or positioned in the bottom of the <div>. They both have a white triangle to cut off the background color. This will leave a solid background.
The third example is using CSS clip-path to cut off the triangle in the bottom. In this example the height of the triangle is a bit hard to calculate. But one advantage is that the triangle is transparent.
The fourth example looks a lot like yours. In this example I translate the <path> -1 unit on the y-axis, so that the upper border of the SVG is not "antialiasing".
.photocollage {
height: 200px;
background: #FF2E63 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMCI+PHBhdGggZD0iTSAwIDAgTCAxMjAwIDEyMCBMIDAgMTIwIFoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 101% auto;
}
.photocollage2 {
background: #FF2E63;
position: relative;
}
.photocollage2 svg {
position: absolute;
bottom: 0;
}
.photocollage3 {
height: 200px;
background: #FF2E63;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
}
.photocollage4 {
height: 160px;
background: #FF2E63;
}
<p>Example 1</p>
<div class="photocollage"></div>
<p>Example 2</p>
<div class="photocollage2">
<div style="height: 200px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path d="M 0 0 L 1200 120 L 0 120 Z" fill="#FFF"/>
</svg>
</div>
<p>Example 3</p>
<div class="photocollage3"></div>
<p>Example 4</p>
<div class="photocollage4"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path transform="translate(0 -1)" d="M 0 0 L 1200 0 L 1200 120 L 0 1 Z" fill="#FF2E63"/>
</svg>

Answer 2

Try giving the svg a very small negative margin-top, one or two pixels should do the trick.
It should pull the shape up ever so slightly to bridge the gap.