CODEWITHSUNDEEP
htmlcsssvgresponsive-designcss-shapes
user17346450
user17346450

Reputation:

White line between an element and svg shape

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>

Upvotes: 3

Views: 2041

Answers (2)

chrwahl
chrwahl

Reputation: 13135

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>

Upvotes: 2

SmilyLily
SmilyLily

Reputation: 88

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.

Upvotes: 3

Related Questions