White line between an element and svg shape

Admin 1
Viewed 469

enter image description hereenter image description here

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>

responsive-design css-shapes svg css html
2 Answers

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>

user_3220840

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.

user_178234330
Related