Как реализовать такой бордер?

Question

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

Answer 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>

БЛОГ НА HUSL

Как реализовать такой бордер?

Ответы (1 шт):