我怎样才能用css弯曲轮廓？

Question

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

那么这样做的最佳方法是什么？

Answer 1

这里有一个想法,依靠一些box-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>