边框CSS，颜色有一定的百分比

我想达到这个效果：

你看，橙色只占整个边框的35%。我该怎么做

HTML:

---

这里有一种使用svg和一些使用笔划划线数组偏移的技巧的方法

编译CSS

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  fill: none;
  stroke-width: 10px;
  stroke: tomato;
  stroke-dasharray: calc(0.5 * calc(6.28319 * 139)) calc(6.28319 * 139);
}

.circle-bg {
  fill: none;
  stroke-width: 10px;
  stroke: grey;
}

.container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h1 {
  font-family: sans-serif;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

---

谢谢你的评论。但什么是SCCS？我该如何使用这种类型的文件呢？它是一种编译成css的预处理语言。你可以在这里找到更多信息，我已经在帖子中添加了编译后的CSS。

h1 {
    line-height: 80px;
    font-size: 20px;
    font-family: Arial;
}

#test {
    margin: auto;
    text-align: center;
    border-radius: 50%;
    height: 80px;
    width: 80px;
    border: 5px solid black;
}

<div class="container">

<h1>50%</h1>
<svg
    x="0px"
    y="0px"
    viewBox="0 0 397.6 435.3"
    enable-background="new 0 0 397.6 435.3"
    xml:space="preserve"
    class="svg"
    >
      <circle
        class="circle-bg"
        cx="198.3"
        cy="217.3"
        r="139.2"
        transform="rotate(270 198.3 217.3)"
        />    

      <circle
        class="circle"
        cx="198.3"
        cy="217.3"
        r="139.2"
        transform="rotate(270 198.3 217.3)"
        />               
  </svg>
</div>

body{
  display: flex;
  justify-content: center;
  align-items: center;
}

//circumference = 2πr 
// svg circle radius is 139

$pi: 3.14159265358979;
$Twopi: $pi * 2;

$circumference: calc(#{$Twopi} * 139);
$arc-length-percent: 0.5;

.circle {
  fill: none;
  stroke-width: 10px;
  stroke: tomato;
  //0.5 - 50% 
  stroke-dasharray: calc(#{$arc-length-percent} * #{$circumference}) $circumference;
}

.circle-bg {
  fill: none;
  stroke-width: 10px;
  stroke: grey;
}


//layout stuff

.container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h1 {
  font-family: sans-serif;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
}

.circle {
  fill: none;
  stroke-width: 10px;
  stroke: tomato;
  stroke-dasharray: calc(0.5 * calc(6.28319 * 139)) calc(6.28319 * 139);
}

.circle-bg {
  fill: none;
  stroke-width: 10px;
  stroke: grey;
}

.container {
  width: 300px;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

h1 {
  font-family: sans-serif;
}

svg {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}