隐藏特定背景上的溢出

Question

我不确定标题是否有意义，但我找不到一种方法可以很快解释没有图像的问题。 这是场景：

你看到的所有红色都是一个svg元素，它充满了红色并具有透明背景，以便看到下面的橙色线条。它是一个分区分隔符，具有这种“波浪”样式，将上部（红色）与下一个部分（白色）分开。 在上部，我有一些带有橙色虚线边框的元素（右边看到的5个），它们绝对位于红色部分的底部。事实上，你看到边框在svg的末尾结束，但显然，svg是一个矩形，它们在白色空间上溢出。 svg通常位于红色部分的末端（部分）。

我需要那些边界停在svg红色部分的末尾，但我不能。我想要颠倒svg（使白色部分成为真正的svg并使背景在红色部分透明）但是这样我就不会看到底部的橙色线条，它们会被白色svg覆盖。他们在下一部分的背景中，所以他们必须留在后台。

此外我无法剪辑任何内容，因为svg始终处于100％宽度，因此修改显示器的宽度会导致橙色垂直线落在svg上的不同位置。

我该如何处理这种情况？谢谢！

PS。我添加了一个最小的jsfiddle来重现场景，我将整体背景变为灰色而不是白色，以便您可以看到svg结束的位置：https://jsfiddle.net/bydcxr2b/

<section class="upper">

  <section class="upper-inner"></section>

  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>


  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px"
   width="100%" viewBox="0 0 1200 110" xml:space="preserve">
    <path fill="red" d="M1200,110L765.285,95.51c-52.554-11.983-114.671-36.865-143.727-37.924 c-37.374-1.362-56.742,16.644-94.115,15.281c-37.375-1.362-54.699-39.417-92.073-40.779c-37.374-1.362-56.742,16.644-94.115,15.281
    c-37.374-1.362-36.012-38.736-92.072-40.779c-49.454-1.803-42.871,56.671-79.112,69.079L0,70V0h1200V110z"/>
  </svg>
</section>

CSS：

.upper {
  position: relative;
  background: #f5f5f5;
}

.upper-inner {
  padding-top: 100px;
  position: relative;
  background: red;
}

.items {
  position: absolute;
  bottom: 0;
  right: 100px;
}

.item {
  display: inline-block;
  border-right: 1px dotted orange;
  margin: 0 20px;
  height: 300px;
}

Answer 1

使用边框而不是使用边框可能是使用repeating-linear-gradient创建边框，您可以轻松控制其在SVG形状上的大小。

由于您没有共享SVG代码，因此这是使用背景模拟SVG的apporximation：

.box {
  width:500px;
  height:200px;
  background:
  repeating-linear-gradient(to bottom,orange 0px,orange 2px,transparent 2px,transparent 4px)10% 0/2px 140px no-repeat,
  repeating-linear-gradient(to bottom,orange 0px,orange 2px,transparent 2px,transparent 4px)50% 0/2px 160px no-repeat,
  
  linear-gradient(5deg, transparent 20%,red 20.5%); 
  border:1px solid;
}


body {
 background:pink;
}

<div class="box">

</div>

Answer 2

我认为这就是你想要的：JSFiddle

我向 .items 添加了height: 100%;，向 .upper 添加了height: auto;，以便个人 .items 相对于其父级（ .items ）可以有100％的高度， .items 的高度相对于其自身的高度（auto） parent（ .upper ）。

.upper {
  height: auto;
  position: relative;
  background: #f5f5f5;
}

.upper-inner {
  padding-top: 100px;
  position: relative;
  background: red;
}

.items {
  height: 100%;
  position: absolute;
  top: 0;
  right: 100px;
}

.item {
  display: inline-block;
  border-right: 1px dotted black;
  margin: 0 20px;
  height: 100%;
}

<div class="upper">
  <div class="upper-inner"></div>

  <div class="items">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="100%" viewBox="0 0 1200 110" xml:space="preserve">
      <path fill="red" d="M1200,110L765.285,95.51c-52.554-11.983-114.671-36.865-143.727-37.924 c-37.374-1.362-56.742,16.644-94.115,15.281c-37.375-1.362-54.699-39.417-92.073-40.779c-37.374-1.362-56.742,16.644-94.115,15.281
        c-37.374-1.362-36.012-38.736-92.072-40.779c-49.454-1.803-42.871,56.671-79.112,69.079L0,70V0h1200V110z"/>
  </svg>
</div>