Мой вопрос:
Возможно ли сделать средствами CSS данный блок(интересует круглый border):
Пожалуйста, обратите внимание, синий круг над серым.
Мой вариант: я сделал, но с помощью картинки:
.number {
position: relative;
width: 105px;
height: 105px;
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
}
.number.number_img:before {
content: '';
position: absolute;
right: -2px;
top: -2px;
width: 100%;
height: 100%;
display: block;
background-image: url(https://erweb.ru/wp-content/uploads/2017/08/circles-1.png);
background-repeat: no-repeat;
background-position: top right;
z-index: 2;
}
.number .number__value {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 55px;
font-weight: 500;
line-height: 0.55;
display: block;
padding: 35px;
max-width: 100px;
max-height: 100px;
border-radius: 50px;
color: #3e9ded;
border: solid 1px #cccccc;
}
1). Ваш вариант должен иметь возможность настройки на любую длину синего круга, чтобы можно было получить и такой:
2). Данный блок не подразумевает какую-либо анимацию, решение на CSS должно быть. 3). Скругление концов полуокружности не обязательная часть, интересует только корректное наложение одного круга над другим, с возможностью ставить произвольно длину синего круга.
Ответ
Решение с использованием SVG:
.number {
position: relative;
width: 105px;
height: 105px;
text-align: center;
display: block;
border-radius: 100%;
margin-left: auto;
margin-right: auto;
margin-top: 30px;
border: solid 1px #cccccc;
}
.number .number__value {
position: relative;
font-family: 'Montserrat', sans-serif;
font-size: 55px;
font-weight: 500;
line-height: 0.55;
display: block;
padding: 35px;
max-width: 100px;
max-height: 100px;
color: #3e9ded;
}
.number__fill {
position: absolute;
z-index: 2;
left: -1px;
top: -1px;
right: -1px;
bottom: -1px;
}
.number__fill svg {
fill: none;
stroke: #3e9ded;
stroke-width: 5px;
overflow: visible;
transform: rotate(-90deg);
stroke-linecap: round;
stroke-dasharray: 330px;
}
В данном случае в атрибуте stroke-dasharray 330 - длина всего круга (если точнее, то 329.3343811035156), а stroke-dashoffset - смещение обводки относительно начального положения.
Комментариев нет:
Отправить комментарий