时间戳

首页 > 解决方案 > 按百分比填充圆形边框

css - 按百分比填充圆形边框

问题描述

我尝试实现几个指南来创建一个根据百分比填充的圆圈，但我似乎无法让它工作（没有动画，只有一个静态的 CSS 圆圈）。

圆形边框当前遵守background-image: linear-gradient我首先设置为 a(90+(360*0.percent))deg和第二个设置为90deg. 它在前 50% 上运行良好，但除此之外，它不会相应地填充。

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background-image: linear-gradient(162deg, transparent 50%, #f0f0f0 50%), linear-gradient(90deg, #f0f0f0 50%, transparent 50%);
}
<div class="circle-border">
  <div class="circle">
  </div>
</div>

linear-gradient当我希望圆圈填充超过 50% 时，应该更改哪些值？

标签： csscss-shapeslinear-gradients

解决方案

对于第一个线性部分，您可以linear-gradient:(270deg,...)用于填充 50% 的圆。

对于其他线性部分，您可以增加角度(270°+)以填充 50% 以上的圆（360° 或 0° = 圆的 75% ... 90° = 圆的 100%）

例如：linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)组合创建一个带有浅灰色背景的圆圈，其中填充了百分之七十五的黑色。（以下片段）

.circle {
  position: relative;
  top: 5px;
  left: 5px;
  text-align: center;
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background-color: #ffffff;
}

.circle-border {
  position: relative;
  text-align: center;
  width: 110px;
  height: 110px;
  margin-left: 30%;
  border-radius: 100%;
  background-color: #E53B3B;
  background: linear-gradient(270deg, black 50%, transparent 50%), linear-gradient(0deg, black 50%, lightgray 50%)
}
<div class="circle-border">
  <div class="circle">
  </div>
</div>

推荐阅读