Question

我想达到这个效果：

您看到橙色仅占整个边框的35％。我怎么能这样做？

HTML：

<div id="test">
    <h1> hello</h1>
</div>

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;
}

Answer 1

这是使用svg和使用笔划虚线阵列偏移的一些技巧的一种方法。

http://codepen.io/flurrd/pen/zZyrBx?editors=1100

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

SCSS

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;
}

编译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;
}

边框CSS，颜色有一定比例

1 个答案: