/ / Как да реализираме два свиващи се кръга в чист css3? - html, css3, frontend, figure

Как да реализираме две свиващи се кръгове в чист CSS3? - html, css3, интерфейс, цифри

Това, което трябва да направя, е на изображението по-долу:

въведете описанието на изображението тук

Не искам изобщо да използвам SVG. Мисля, че това е две Divs с граница радиус 50%. Но как ги сливам като на изображение? Можете ли да разрешите това или да дадете съвет?

Отговори:

3 за отговор № 1

Това е най-опростеният начин да го направите, може да го подобрите за нуждите си

#main {
width: 80px;
border-radius: 50%;
height: 80px;
border: 3px solid blue;
}

#background {
background: grey;
border-radius: 50%;
width: 100%;
height: 100%;
position: relative;
z-index: 2;
}

#small {
background: grey;
width: 30px;
border-radius: 50%;
height: 30px;
border: 3px solid blue;
margin-top: -30px;
margin-left: 50px;
}
<div id="main">
<div id="background"></div>
</div>
<div id="small"></div>


Свързани въпроси


Коментари (0)

Добави коментар