0
700
VistasCírculo de porcentaje borde CSS Reaccionar
Trato de crear un círculo con un borde en el que puedo controlar la proporción de la parte roja a la parte verde. Estoy usando React y componentes con estilo. Creé algo como esto:
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;pero como puede ver en la imagen, hay un feo fragmento rojo que sobresale de 1px. No puedo encontrar el error en mi código, ¿cómo puedo solucionarlo?
1 Respuestas
Responde la pregunta0
No creo que sea un error particular en su código, es solo que el sistema está tratando de averiguar cómo mostrar píxeles CSS parciales en una pantalla que usa varios píxeles de pantalla por píxel CSS. Algunos pueden quedarse atrás.
Una forma diferente de crear el efecto que desea es usar imágenes de fondo formadas por un degradado cónico superpuesto con uno radial (para crear el 'agujero' en el medio).
Este es un fragmento simple para demostrar la idea en HTML/CSS. La variable CSS --ratio podría configurarse en JS usando setProperty para cualquier proporción de rojo a verde que se requiera.
.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>Nota: si bien es posible obtener el mismo efecto usando una configuración más simple: solo una declaración de imagen de fondo en el div real con primero el degradado radial y luego el degradado cónico, puede encontrarse con otro problema de 'píxel', una especie de borrosidad alrededor de las curvas. Por lo tanto, este fragmento ordena los círculos con clip-path para suavizar los bordes.