White line between an element and svg shape-CodePudding

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  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" ></path>
   </svg>
</div>

CodePudding user response：

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 ></div>

<p>Example 2</p>
<div >
  <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 ></div>

<p>Example 4</p>
<div ></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>

CodePudding user response：

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.