Можно ли создавать кривые пунктирные линии с помощью CSS?

Question

Моя цель - создать пунктирные линии, подобные тем, которые я выделил на изображениях ниже. Это возможно только с помощью CSS?

Моя веб-страница реагирует с использованием Bootstrap, и если ширина окна изменяется, пунктирные линии должны находиться в правильном положении.

Answer 1

Плохая новость заключается в том, что вы не можете согнуть пунктирную границу. Он всегда будет твердым, если вы используете граничный радиус в CSS. Но, как я думаю, этот пример приведет вас к правильному решению.

#wrapper { 
 
     width: 680px; 
 
     display:table; 
 
     margin: auto; 
 
    } 
 
    #wrapper > div { 
 
     display: inline-block; 
 
    } 
 
    .circle { 
 
     position:relative; 
 
     padding: 20px; 
 
     width: 120px; 
 
     height: 120px; 
 
     border-radius: 50%; 
 
     background-color: #eee; 
 
     border: solid 1px #ddd; 
 
     z-index: 999; 
 
    } 
 
    .line-top { 
 
     width: 120px; 
 
     height:60px; 
 
     z-index: -1; 
 
     background: transparent; 
 
     border: none; 
 
     border-top: dashed 2px orange; 
 
     padding: 40px 40px; 
 
     border-radius: 50%; 
 
     margin: 20px -50px 0; 
 
    } 
 
    .line-bottom { 
 
     width: 120px; 
 
     height:60px; 
 
     z-index: -1; 
 
     background: transparent; 
 
     border: none; 
 
     border-bottom: dashed 2px orange; 
 
     padding: 40px 40px; 
 
     border-radius: 0 0 50% 50%; 
 
     margin: 0 -65px; 
 
    }

<div id="wrapper"> 
 
    <div class="circle"></div> 
 
    <div class="line-top"></div> 
 
    <div class="circle"></div> 
 
    <div class="line-bottom"></div> 
 
    <div class="circle"></div> 
 
    </div>