Скрыть переполнение на определенном фоне

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

Я думаю, это то, что вы хотите: JSFiddle

Я добавил height: 100%; к .items и height: auto;до .upper , так что отдельные .items могут иметь высоту 100% относительно своего родителя ( .items ) и высоту .items относительно высоты (auto) его родителя ( .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>

Answer 2

Возможно, решение вместо использования границы - это использование repeating-linear-gradient для создания вашей границы, и вы можете легко контролировать ее размер по форме SVG.

Поскольку вы не передали код SVG, здесьэто apporximation с использованием фона для имитации вашего SVG:

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