как реализовать проще можно подобную двойную рамку?внешнюю сделал,а с внутренней затуп случился))красным эт я выделил просто
-
2Это явно не рамка. Гуглите CSS Pie Chart– Alexey Ten17 фев 2021 в 11:42
-
спасибо большое– devtools11317 фев 2021 в 11:47
-
@AlexeyTen: всё верно - наверняка это пргогресс-бар задумывался, но судя по скриншоту, несостыковка прогресса (75%) и процентов (85%). Поэтому похоже просто на декоративный элемент.– UModeL17 фев 2021 в 11:52
Добавить комментарий
|
1 ответ
если надо только 75%, то
body {
padding: 30px;
}
div {
display: block;
position: relative;
width: 100px;
height: 100px;
border: 3px solid black;
border-radius: 50%;
border-left: 3px solid transparent;
transform: rotate(45deg);
}
div:after {
content: '';
position: absolute;
left: -13px;
top: -13px;
width: 120px;
height: 120px;
border: 3px solid #808080;
border-radius: 50%;
}
<div></div>
А если нужен сектор:
div {
position: relative;
width: 106px;
height: 106px;
border-radius: 50%;
background-color: black;
background-image:
linear-gradient(calc(0deg + 90deg), transparent 50%, white 50%),
linear-gradient(calc(30deg - 90deg), white 50%, transparent 50%);
}
div:after {
content: "";
z-index: 100;
position: absolute;
left: 3px;
top: 3px;
border-radius: 50%;
width: 100px;
height: 100px;
background: white;
}
<div></div>