¡Acostúmbrate a escribir juntos! Este es el primer día de mi participación en el "Nuggets Daily New Plan·Desafío de actualización de abril", haz clic para ver los detalles del evento
Estoy participando en el evento de experiencia Nuggets sobre el código, detalles: muestra tus bloques de código creativo
¿No ha estado participando en una actividad de juego creativo recientemente? Me preguntaba si podría usar CSS para combinar algunos efectos hermosos, como un anillo hueco o una forma de abanico, así que fui a Internet a buscar tutoriales y busqué Google y Baidu. No he podido encontrar los resultados que quiero. Tal vez esta demanda es muy pequeña, o tal vez mi postura de búsqueda es incorrecta. Todo lo que encontré es usar vendas en los ojos para lograr el efecto correspondiente, que no es lo que quiero. De repente recordé que cavé hace un tiempo que Jin me dio una copia del nuevo mundo css de Zhang Xinxu, así que revisó el contenido del libro y encontró una solución, que es usar clip-pathatributos poderosos. Echemos un vistazo a cómo este atributo se puede realizar el efecto deseado.
Este artículo solo describe cómo usarlo
clip-pathpara lograr el efecto que queremos, y noclip-pathexplicará otras propiedades.Si estás interesado, puedes buscar y aprender por ti mismo.
Hablemos de cómo se hace la forma tradicional de hacer un abanico, el método que aprendí de Internet usa border-radiusatributos para dibujar dos semicírculos, y luego gira uno de los semicírculos para lograr el efecto deseado, como el siguiente
Cuando el ángulo del abanico es mayor a 180 grados, el color de nuestro segundo semicírculo debe ser el mismo que el color del primer círculo para formar un efecto extendido.Si el ángulo del abanico es menor a 180 grados, el color de nuestro segundo semicírculo será ser Para ser del mismo color que el fondo, aquí el color del segundo círculo es azul claro y gris claro para la comprensión de todos.
Se puede ver que no hay problema con la forma de abanico de más de 180 grados, pero el ángulo de menos de 180 grados requiere que nuestro color de fondo sea un color sólido, y el color de fondo debe permanecer sin cambios, clip-pathentonces, ¿cómo logra nuestro protagonista? ¿eso?
clip-pathHay varios métodos. Hoy estamos usando el recorte de polígonos polygon. El uso de esta propiedad es muy simple. Simplemente configure cada nodo del gráfico que desea recortar, y CSS conectará los puntos que configure, dejando solo el gráfico que existe en la línea de conexión inferior, como la siguiente
width: 100px;
height: 100px;
background: green;
clip-path:polygon(0% 0%, 50px 0, 50px 50px, 0 0);
复制代码Entonces, ¿qué pasa si es una forma de abanico? En este momento, podemos dibujar un círculo y luego podemos cortar los gráficos que queramos, tal como se muestra a continuación (el bloque de código de colección se colocará más adelante), primero dibujamos un círculo, y luego vaya a Recortar un área en la esquina superior izquierda (azul claro), luego la parte superpuesta del área de recorte y el área de fondo permanecerán (forma de sector)
En cuanto a cómo hacer una forma de abanico hueco, también es muy simple. Podemos cambiar el color de fondo del círculo a un borde, como se muestra a continuación, dibujar un borde y luego recortar la posición de la esquina superior izquierda y el se mantendrá la parte superpuesta del borde y el área de recorte.
Pon un bloque de código debajo
Este pequeño punto de conocimiento ha sido introducido, puede ser utilizado por pocas personas, pero es mejor que nada.