Мне нужно нарисовать 2 круга, связанных с линией? В CSS только

Question

мне нужно сделать 2 круг, связанный с CSS, так что я буду использовать полетной сайт поиска, если вы можете позволить мне получить вам ответить на это то, что я хочу

чистый CSS или materializecss благодаря

Answer 1

Это общая идея с использованием одного элемента и псевдоэлементов для кругов. Расположите их по линии, и использовать фоновый цвет в круге, который соответствует фон страницы

body { 
 
    padding: 2em; 
 
} 
 
div { 
 
    background: blue; 
 
    height: 1px; 
 
    position: relative; 
 
} 
 
div:before, div:after { 
 
    position: absolute; 
 
    top: 50%; left: 0; 
 
    transform: translateY(-50%); 
 
    content: ''; 
 
    height: 1em; width: 1em; 
 
    border: 1px solid blue; 
 
    border-radius: 50%; 
 
    background: #fff; 
 
} 
 

 
div:after { 
 
    left: auto; 
 
    right: 0; 
 
}

<div></div>

Или вы можете расположить круги за пределами родительского элемента вместо использования фона образ.

body { 
 
    padding: 2em; 
 
} 
 
div { 
 
    background: blue; 
 
    height: 1px; 
 
    position: relative; 
 
} 
 
div:before, div:after { 
 
    position: absolute; 
 
    top: 50%; left: 0; 
 
    transform: translate(-100%,-50%); 
 
    content: ''; 
 
    height: 1em; width: 1em; 
 
    border: 1px solid blue; 
 
    border-radius: 50%; 
 
} 
 

 
div:after { 
 
    left: auto; 
 
    right: 0; 
 
    transform: translate(100%,-50%); 
 
}

<div></div>