0

введите сюда описание изображения

как реализовать проще можно подобную двойную рамку?внешнюю сделал,а с внутренней затуп случился))красным эт я выделил просто

3
  • 2
    Это явно не рамка. Гуглите CSS Pie Chart
    – Alexey Ten
    17 фев 2021 в 11:42
  • спасибо большое 17 фев 2021 в 11:47
  • @AlexeyTen: всё верно - наверняка это пргогресс-бар задумывался, но судя по скриншоту, несостыковка прогресса (75%) и процентов (85%). Поэтому похоже просто на декоративный элемент.
    – UModeL
    17 фев 2021 в 11:52

1 ответ 1

0

если надо только 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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.