gpt4 book ai didi

javascript - 百分比圆边框 CSS React

转载 作者:行者123 更新时间:2023-12-05 04:39:57 25 4
gpt4 key购买 nike

<分区>

我尝试创建一个带边框的圆圈,我可以在其中控制红色部分与绿色部分的比例。我正在使用 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 突出的红色碎片。我在我的代码中找不到错误,我该如何修复它?

enter image description here

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com