css - 如何用css弯曲轮廓？

Question

我正在尝试使用 CSS 创建这种轮廓效果。我无法思考正确的方向，也不想使用任何图像进行弯曲。

那么最好的方法是什么？

Answer 1

这是一个依靠 somebox-shadow和border伪元素来创建元素之间链接的想法：

.out {
  display: inline-block;
  border-radius: 30px;
  width: 120px;
  height: 50px;
  box-shadow: 0 0 0 3px #fff inset, 0 0 0 50px lightblue inset;
  border: 2px dashed red;
  position: relative;
}

.out:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -8px;
  top: calc(50% - 5px);
  width: 9px;
  height: 10px;
  border-top: 2px dashed red;
  border-bottom: 2px dashed red;
  z-index: 1;
  box-shadow: 0 0 0 3px #fff inset, 0 0 0 50px lightblue inset;
}

.out:not(:last-child):before {
  content: "";
  position: absolute;
  right: -40px;
  top: calc(50% - 1.5px);
  width: 60px;
  height: 5px;
  z-index: 3;
  background: lightblue;
}

<div>
  <div class="out">
  </div>
  <div class="out">
  </div>
  <div class="out">
  </div>
  <div class="out">
  </div>
</div>