javascript - 百分比圆边框 CSS React

<分区>

我尝试创建一个带边框的圆圈，我可以在其中控制红色部分与绿色部分的比例。我正在使用 React 和样式组件。我创建了这样的东西:

import React from "react";
import styled from "styled-components";

const Wrapper = styled.div`
  margin: 50px auto;
  width: 150px;
  height: 150px;
  background: ${({ theme }) => theme.red};
  border-radius: 50%;
`;

const Circle = styled.div``;

const MaskFull = styled.div`
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 150px, 150px, 75px);
  animation: fill ease-in-out 3s;
  transform: rotate(126deg);
`;

const Fill = styled.div`
  clip: rect(0px, 75px, 150px, 0px);
  background-color: ${({ theme }) => theme.green};
  animation: fill ease-in-out 3s;
  transform: rotate(126deg);
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
`;

const InsideCircle = styled.div`
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: #fff;
  line-height: 130px;
  text-align: center;
  margin-top: 10px;
  margin-left: 10px;
  position: absolute;
  z-index: 100;
  font-weight: 700;
  font-size: 2em;
`;

const SecondMask = styled.div`
  width: 150px;
  height: 150px;
  position: absolute;
  border-radius: 50%;
  clip: rect(0px, 150px, 150px, 75px);
`;

const Avatar: React.FC = () => {
  return (
    <Wrapper>
      <Circle>
        <MaskFull>
          <Fill />
        </MaskFull>
        <SecondMask>
          <Fill />
        </SecondMask>
        <InsideCircle />
      </Circle>
    </Wrapper>
  );
};

export default Avatar;

但是正如你在图片上看到的，有一个丑陋的 1px 突出的红色碎片。我在我的代码中找不到错误，我该如何修复它？

最佳答案

我不认为这在您的代码中是一个特别的错误 - 只是系统正在尝试找出如何在每个 CSS 像素使用多个屏幕像素的屏幕上显示部分 CSS 像素。有些人可能会“掉队”。

创建所需效果的另一种方法是使用由圆锥渐变和径向渐变叠加而成的背景图像(在中间形成“孔”)。

这是一个用 HTML/CSS 演示想法的简单片段。 CSS 变量 --ratio 可以在 JS 中使用 setProperty 设置为所需的红绿比。

.ratio {
  --ratio: 0.3;
  height: 150px;
  width: 150px;
  border-radius: 50%;
  position: relative;
  clip-path: circle(50%);
}

.ratio::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-image: conic-gradient(red 0 calc(var(--ratio) * 360deg), lime calc(var(--ratio) * 360deg) 360deg);
  z-index: -2;
}

.ratio::after {
  content: '';
  position: absolute;
  width: 80%;
  height: 80%;
  top: 10%;
  left: 10%;
  background-color: white;
  border-radius: 50%;
  z-index: -1;
}

<div class="ratio"></div>

注意:虽然使用更简单的设置可以获得相同的效果 - 实际 div 上的一个背景图像语句首先是径向渐变，然后是圆锥渐变，但您可能会遇到另一个“像素”问题，曲线周围的一种模糊性。因此，此代码段使用 clip-path 整理圆圈以提供平滑的边缘。

关于javascript - 百分比圆边框 CSS React，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70368658/

上一篇：mongodb - 在 MongoDB 中查找最大值

下一篇：java - 使用 Object 类来表示所有类型的 Json 负载是个好主意

相关文章：

javascript - 按钮点击功能，轻松初始化

javascript - 动态绑定(bind)图像 Angular 8

javascript - 使用jquery判断复选框是否被选中

javascript - 如何设置元素的标题属性而不仅仅是字符串？

html - 浏览器正在覆盖我代码中的所有元素并将它们变成链接

html - 悬停时的小 CSS 动画

html - 为什么我可以从 CSS 注释中关闭样式标签？

javascript - 获取选定的节点 ID

javascript - Mozilla Firefox 中的地理定位 : Both success and error triggered

css - IE 11 中的 Flex 元素不占用图像子项的高度