Реализация кривого border dashed

Question

Как лучше реализовать данный элемент, это прослойка между двумя блоками. Вариант вставить картинкой рассматривал, он не подходит. Так же пытался сделать через частичного border на некоторых элементах и skew, но толгового из этого ничего не вышло.

Answer 1

html,
body {
  margin: 0;
}

#a {
  width: 100%;
  height: 150px;
}

#b {
  width: 100%;
  height: 150px;
  background: #ddd;
  border-top: 1px dashed #aaa;
  position: relative;
}

.sep {
  justify-content: center;
  width: 100%;
  position: absolute;
  display: flex;
  top: -15px;
}

.t {
  width: 30px;
  height: 30px;
  transform: rotate(45deg);
  background: #ddd;
  border-top: 1px dashed #aaa;
  border-left: 1px dashed #aaa;
  margin-left: 10px;
}

<div id="a"></div>

<div id="b">
  <div class="sep">
    <div class="t"></div>
    <div class="t"></div>
    <div class="t"></div>
    <div class="t"></div>
    <div class="t"></div>
  </div>
</div>

Answer 2

Вот так это можно реализовать:

.container {
  width: 500px;
  height: 500px;
  position: relative;
  margin: auto;
  border: 1px solid black;
}

.rectangle {
  width: 500px;
  height: 25px;
  background: #f0eaf6;
  position: absolute;
  top: 25px;
  z-index: 1;
}

.triangle1 {
  width: 50px;
  height: 50px;
  background: #f0eaf6;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
  border: 2px dashed indigo;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 125px;
}

.triangle2 {
  width: 50px;
  height: 50px;
  background: #f0eaf6;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
  border: 2px dashed indigo;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 175px;
}

.triangle3 {
  width: 50px;
  height: 50px;
  background: #f0eaf6;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
  border: 2px dashed indigo;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 225px;
}

.triangle4 {
  width: 50px;
  height: 50px;
  background: #f0eaf6;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
  border: 2px dashed indigo;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 275px;
}

.triangle5 {
  width: 50px;
  height: 50px;
  background: #f0eaf6;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 50%);
  border: 2px dashed indigo;
  transform: rotate(-45deg);
  position: absolute;
  top: 10px;
  left: 325px;
}
.hr-dashed {
width: 25%;
position: absolute;
border: 2px dashed indigo;
top: 15px;
  }
  .hr-dashed2 {
width: 24%;
position: absolute;
border: 2px dashed indigo;
top: 15px;
right: 0;
  }

<div class="container">
  <div class="rectangle"></div>
  <hr class="hr-dashed">
  <hr class="hr-dashed2">
  <div class="triangle1"></div>
  <div class="triangle2"></div>
  <div class="triangle3"></div>
  <div class="triangle4"></div>
  <div class="triangle5"></div>
</div>

Чтобы пунктирная "граница" была только слева и справа от треугольников - можно заморочиться с <hr>

Answer 3

Решение SVG

Подробная, пошаговая инструкция, как создать в SVG контур фигуры совпадающий pixel perfect, с заданным образцом,- в этом ответе

На мой взгляд, подобные вопросы лучше решать с помощью SVG и быстрей и точнее получается и код намного короче по сравнению с решениями CSS

.container {
width:50vw;
height:50vh;
}

<svg xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1251 98">
        <!-- Левый прямоугольник -->
<path d="M0-1.5h39V99.1l-39-.3Z" style="fill:#E5E5E5"/>
           <!-- Правый прямоугольник -->
<path d="M1221-1.5h30.5L1251 98h-30z" style="fill:#E5E5E5"/>
        <!-- Фон фигуры -->
<path d="M39 74.4h248.4c23-13.3 46.2-27.2 69.3-40l62.8 40.8L480 34.4l60.8 39.5 60.8-41 61.8 40.2 57-38.4 61 39.7L838.7 36 898 74.4h323V98L39 99V74.8" style="fill:#F3E7FF"/>
        <!-- Пунктирная линия -->
<path d="M1221 74.4H898l-59.2-38.3L814 53.5l-32.7 20.9-30.5-19.8-30.5-19.9L692 54l-28.5 19.2-30.9-20-31-20.2-30.3 20.5L540.8 74l-30.4-19.8L480 34.4l-30.3 20.4-30.2 20.4L388 54.8l-31.4-20.4c-24.2 11.7-43 25-69.3 40H38.9" style="fill:none;stroke:grey;stroke-width:1.5px; stroke-dasharray:3 2"/>
</svg>

БЛОГ НА HUSL

Реализация кривого border dashed

Ответы (3 шт):

Решение SVG