Как сделать не замкнутое кольцо на css?

Question

[dengerskif]

Ребят учусь верстке и застрял на вот такой проблеме, не могу понять как сделать не замкнутое кольцо.

Comments

[Евгений Петров]

Ответ Сергей Андреев решением отметьте. Люди стараются, с платочком вокруг вас бегают, а вы...

Answer 1

[Сергей Андреев]

только через svg stroke, вот demo

Answer 2

[rmaksim]

или так - как раз для "учусь верстке" и не только

Answer 3

[dengerskif]

спасибо за ответы)

Comments

[Евгений Петров]

Отмечайте решением ответ Сергей Андреев

Answer 4

[Dmitriy_Sk]

Может кому-то пригодится! На самом деле вопрос решается еще проще! Сам столкнулся.
Создание окружности:
.circle {
margin: auto;
border-radius: 50%;
width: 50px;
height: 50px;
border: 4px solid lightgray;
border-top: 4px solid black;
margin-bottom: 8px;
animation: spin 2s linear infinite;
}
И заставляем его крутится:
@keyframes spin {
0% {
transform: rotate(0);
}
100% {
transform: rotate(360deg);
}
}

Answer 5

[miss_moon]

<div class="kryg_color">
        <div class="kryg_white"></div>
</div>

.kryg_color {
    width: 100px;
    height: 100px;
    position: relative;
    background-color: red;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

.kryg_color::before {
    content:" ";
    position: absolute;
    background-color: blue;
    top: 0;
    height: 50%;
    width: 100%;
    transform: rotate(90deg);
    transform-origin: 50% 100%;

}
.kryg_color::after {
    content: "";
    position: absolute;
    background-color: blue;
    bottom: 0;
    height: 50%;
    width: 100%;
    transform: rotate(25deg);
    transform-origin: 50% 0;
}
.kryg_white{
    width: 80px;
    height: 80px;
    position: relative;
    background-color: white;
    border-radius: 50%;
    overflow: hidden;
    z-index: 5;
}