元素和 svg 形状之间的白线

Question

大家好，我正在使用从 shapedivider 生成的 svg 整形器，你怎么看，有一条白线，我不知道为什么它在那里以及如何删除它。你能帮帮我吗？

有形状分隔符的代码：

.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

尝试给 svg 一个非常小的负边距顶部，一两个像素应该可以解决问题。它应该稍微拉起形状以弥合间隙。

Answer 2

这里有四个例子。前两个使用 SVG 作为背景或定位在 <div> 的底部。它们都有一个白色三角形来切断背景颜色。这将留下坚实的背景。

第三个例子是使用CSS clip-path 剪掉底部的三角形。在这个例子中，三角形的高度有点难以计算。但是一个好处是三角形是透明的。

第四个例子看起来很像你的。在此示例中，我在 y 轴上平移 <path> -1 单位，以便 SVG 的上边框不是“抗锯齿”。

.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>

元素和 svg 形状之间的白线

White line between an element and svg shape

html

css

svg

responsive-design

css-shapes