Как сделать на CSS неполную обводку круга?

#css

Как на CSS сделать неполную обводку круга?

    

Ответы

Ответ 1

Вот так будет универсальнее - можно длину обводки настраивать по желанию:



.pie {
  display: inline-block;
  margin: .5em;
  width: 8em;
  height: 8em;
  position: relative;
  border-radius: 50%;
}

.pie:after {
  border-radius: 50%;
  display: block;
  content: "";
  background: #fff;
  position: absolute;
    left: .5em;
  top: .5em;
  height: 7em;
  width: 7em;
}



.p1 {
  background-image: linear-gradient(-30deg, #ddd 50%, transparent 50%),
                    linear-gradient(90deg, #ddd 50%, steelblue 50%);
}

.p2 {
  background-image: linear-gradient(90deg, #ddd 50%, steelblue 50%);
}

.p3 {
  background-image: linear-gradient(150deg, transparent 50%, steelblue 50%),
                    linear-gradient(90deg, #ddd 50%, steelblue 50%);
}

.p4 {
  background-image: linear-gradient(270deg, transparent 50%, steelblue 50%),
                    linear-gradient(180deg, #ddd 50%, steelblue 50%);
}






Ответ 2

Вот так ?



* {
  margin: 0;
}
div {
  width: 300px;
  height: 300px;
  border: 10px solid red;
  border-right: 10px solid transparent;
  border-radius: 300px;
  margin: 20px auto;
}