Cuando empiezas a dibujar con CSS, lo habitual es construir formas simples: círculos, triángulos o pequeños iconos. Pero en cuanto quieres añadir más detalle o crear composiciones más ricas, aparece una limitación clara: el HTML empieza a crecer innecesariamente.
Aquí es donde entran en juego los pseudo-elementos en CSS.
Gracias a ::before y ::after, puedes añadir capas visuales, detalles decorativos e incluso partes completas de una ilustración sin ensuciar el marcado. Esto no solo mejora la estética, sino también la mantenibilidad y la claridad del código.
Además, su uso tiene impacto directo en algo clave en UX: la relación entre tiempo de decisión y carga cognitiva. Porque no se trata solo de dibujar más, sino de dibujar mejor.
Qué son los pseudo-elementos en CSS y por qué importan tanto
Los pseudo-elementos permiten crear contenido visual adicional dentro de un elemento, sin añadir nodos al HTML.
Los más utilizados son:
::before
::after
Ambos funcionan como capas extra que puedes posicionar, estilizar y animar.
La gran ventaja: más complejidad visual, menos HTML
Uno de los errores más comunes al dibujar con CSS es abusar del HTML.
Si vienes de crear estructuras más básicas como en formas con CSS, aquí notarás la diferencia enseguida.
Resultado:
HTML más limpio
CSS más potente
Componentes más reutilizables
Cómo funcionan ::before y ::after en la práctica
content no es opcional
Sin content, el pseudo-elemento no existe:
.elemento::before { content: ''; }
Aunque no muestres texto, necesitas declararlo.
Se comportan como hijos del elemento
Se renderizan dentro del elemento, como si fueran hijos:
Buenas prácticas al usar pseudo-elementos en proyectos reales
No metas contenido importante en content
Úsalos para decoración o refuerzo visual
Mantén el HTML limpio
Documenta estructuras complejas
CSS no tiene que demostrar nada
No siempre CSS es la mejor solución.
Si algo es demasiado complejo: usa SVG.
Errores frecuentes al dibujar con CSS usando pseudo-elementos
Olvidar position: relative
Abusar de z-index
Sobrecargar visualmente
Crear CSS difícil de mantener
Cuándo usar pseudo-elementos y cuándo no
Úsalos cuando:
quieras añadir decoración
necesites capas extra
quieras evitar más HTML
Evítalos cuando:
el contenido sea importante
la complejidad sea alta
SVG sea más claro
Preguntas frecuentes sobre pseudo-elementos en CSS
¿Se pueden hacer ilustraciones completas con CSS? Sí, pero no siempre es lo más práctico.
¿Pseudo-elementos vs pseudo-clases?
pseudo-clases → estados
pseudo-elementos → partes
¿Afectan a la accesibilidad? Sí, si metes contenido importante en ellos.
Dibujar mejor con CSS no consiste en añadir más, sino en decidir mejor
Los pseudo-elementos en CSS te permiten crear más con menos. Añadir capas, enriquecer interfaces y mejorar la claridad visual sin complicar el HTML.
Pero también exigen algo clave: criterio.
No se trata de añadir más capas, sino de reducir la fricción visual.
Si ya has practicado con formas básicas e iconos, los pseudo-elementos en CSS son el siguiente paso para construir ilustraciones más ricas sin complicar innecesariamente el HTML. Y cuando empieces a usarlos con criterio, verás que no solo mejoras tus dibujos con CSS: también mejoras tu forma de pensar componentes.
Cuando pensamos en iconografía para una interfaz, lo más habitual es recurrir a SVG, librerías de iconos o imágenes exportadas desde una herramienta de diseño. Es una decisión lógica, práctica y muy extendida. Sin embargo, hay un terreno donde dibujar iconos con CSS sigue teniendo muchísimo sentido: pequeños componentes, microinteracciones, detalles visuales del sistema y elementos geométricos sencillos que no necesitan depender de recursos externos.
Este enfoque no consiste en reemplazar por completo otras soluciones. La clave está en entender cuándo compensa y por qué puede ser útil. En muchos casos, crear iconos con CSS permite reducir dependencias, integrar mejor el estilo visual con el componente y controlar estados interactivos de forma muy natural.
Además, trabajar así obliga a pensar la interfaz de otra manera. No se trata solo de “dibujar”, sino de construir formas con intención. Y ahí aparece una idea muy interesante desde UX: la relación entre tiempo de decisión y carga cognitiva.
Un icono cumple bien su función cuando se entiende casi sin pensar. Si una persona necesita detenerse demasiado para interpretarlo, el tiempo de decisión aumenta. Y cuando eso ocurre, también sube la carga cognitiva. En cambio, si el icono es claro, reconocible y coherente con el sistema visual, la interfaz se vuelve más fluida.
En este artículo vas a ver cómo dibujar iconos sencillos con CSS sin usar SVG ni imágenes, qué propiedades conviene utilizar, qué errores evitar y cómo aplicar este enfoque en componentes reales. La idea no es solo que copies ejemplos, sino que entiendas la lógica visual que hay detrás para poder construir tus propios iconos con criterio.
Cuándo tiene sentido dibujar iconos con CSS
La primera pregunta razonable es esta: si ya existen SVG, librerías y sprites, ¿por qué seguir explorando el dibujo con hojas de estilo?
La respuesta no es que CSS sea mejor en todos los casos. La respuesta correcta es que, en algunos contextos, es una solución suficientemente buena y además muy eficiente.
CSS como herramienta para formas simples
Los iconos hechos con CSS funcionan especialmente bien cuando están formados por:
líneas
círculos
rectángulos
esquinas
diagonales
composiciones muy básicas
Por eso suelen encajar bien iconos como una X de cerrar, un signo más, un signo menos, una flecha, una lupa o un check. Todos ellos comparten una característica: pueden descomponerse visualmente en formas muy simples.
Qué ventajas puede aportar este enfoque
Cuando el contexto acompaña, crear iconos con CSS tiene varias ventajas. La primera es que evitas cargar archivos o dependencias externas para resolver algo muy pequeño. La segunda es que el icono pasa a formar parte del propio sistema de estilos del componente. La tercera es que las transiciones, animaciones y cambios de estado se vuelven muy cómodos de manejar.
También hay una ventaja menos obvia: este enfoque te ayuda a pensar mejor la estructura visual de una interfaz. Te obliga a preguntarte qué forma es realmente necesaria para comunicar una acción.
Cuándo no compensa
Aquí conviene ser claras: no todos los iconos deberían hacerse con CSS. En cuanto el icono necesita detalle, curvas complejas, múltiples capas, precisión de marca o escalabilidad muy fina, SVG suele ser mejor opción.
Dicho de otra manera: CSS es excelente para iconos sencillos, pero no para todo un sistema complejo de iconografía.
Cómo pensar un icono como una construcción geométrica
Para dibujar con CSS hay que cambiar un poco la mentalidad. No estás pintando libremente, sino construyendo a partir de cajas y reglas visuales.
Todo parte de un contenedor
La base habitual de un icono CSS es un elemento contenedor pequeño que servirá como área de dibujo:
Este patrón es simple, pero muy útil. El icono tiene un espacio definido, puede heredar color del contexto y permite posicionar pseudo-elementos dentro de él.
El papel de ::before y ::after
Los pseudo-elementos son casi imprescindibles para este tipo de trabajo. Gracias a ::before y ::after puedes añadir trazos y formas sin meter más HTML.
Con este enfoque tienes tres capas principales para dibujar:
el propio elemento
::before
::after
Y si además usas box-shadow, puedes duplicar líneas o repetir formas con muy poco código.
Propiedades CSS que más vas a usar
Si quieres trabajar iconos con CSS, estas propiedades te van a acompañar una y otra vez:
background
border
border-radius
transform
rotate
box-shadow
gradientes lineales y radiales
posicionamiento absoluto
No hace falta recurrir siempre a técnicas avanzadas. De hecho, muchas veces cuanto más simple es la construcción, mejor se entiende y más fácil es de mantener.
Tiempo de decisión y carga cognitiva en iconografía de interfaz
Aquí entramos en un punto clave para que este artículo no se quede solo en la parte técnica.
Un icono no se valora únicamente por cómo está construido, sino por la rapidez con la que comunica. Cuando una persona ve un icono y entiende al instante qué acción representa, el tiempo de decisión baja. Eso significa que la interacción se siente más natural.
En cambio, cuando el icono es ambiguo, recargado o inconsistente con otros iconos del sistema, ocurre lo contrario. El usuario duda más. Tiene que interpretar. Tiene que frenar un segundo. Y ese pequeño freno incrementa la carga cognitiva.
Un icono muy ingenioso no siempre es un buen icono
Este es uno de los errores más comunes cuando se explora el dibujo con CSS: obsesionarse con lo espectacular y olvidar lo legible.
Sí, puede ser divertido construir una forma rebuscada solo con bordes, sombras y rotaciones. Pero si el resultado no se entiende rápido o requiere demasiados ajustes visuales para funcionar, quizá no sea la mejor solución.
La pregunta útil no es solo “¿puedo dibujarlo con CSS?”, sino esta otra: “¿lo entenderá la persona usuaria sin esfuerzo?”
Preparar una base reutilizable para iconos con CSS
Si vas a usar esta técnica en más de un componente, merece la pena preparar una pequeña base reutilizable.
Aquí estás usando dos barras y cruzándolas. La idea es simple y funciona muy bien en botones de cerrar, modales, etiquetas y alertas.
Qué conviene vigilar
Si haces la X demasiado fina o pequeña, perderá claridad. Y si el grosor no acompaña, el usuario puede tardar un poco más en procesarla. Aunque parezca un detalle menor, este tipo de ajustes afecta directamente al tiempo de decisión.
Cómo dibujar un icono de más y menos con CSS
Muy útiles para acordeones, controles de cantidad o interfaces expandibles.
Si el + pasa a - en un acordeón, una transición suave ayuda a que el cambio se perciba con más naturalidad. Una interfaz clara no solo depende de las formas, sino también de cómo cambian esas formas.
Cómo dibujar una hamburguesa de menú con CSS
El clásico menú hamburguesa puede resolverse con muy poco código.
Aquí el elemento principal funciona como línea central y box-shadow genera las dos líneas extra.
Por qué es una buena solución
Es compacta, ligera y fácil de animar. Eso sí, sigue siendo importante recordar que esconder la navegación tras un menú no siempre mejora la experiencia. En escritorio, muchas veces mostrar las opciones directamente reduce carga cognitiva.
Cómo dibujar una lupa con CSS
La lupa es uno de los mejores ejemplos de iconos sencillos con CSS.
Este ejemplo ya requiere más cuidado visual. Funciona, pero también deja bastante claro que llega un punto en el que CSS empieza a ser menos natural que SVG.
Ese gesto pequeño ayuda a reforzar la idea de avance o navegación.
Transformar menú en cerrar
También puedes convertir una hamburguesa en una X cuando el menú se abre. Este tipo de transformación visual suele resultar muy natural si está bien medida.
La microanimación también influye en la claridad
Una animación adecuada puede acompañar la comprensión del cambio de estado. Una animación excesiva, lenta o innecesaria puede distraer y añadir carga cognitiva. Como casi todo en interfaz, el equilibrio importa más que el efecto.
Errores frecuentes al crear iconos con CSS
Aunque el dibujo “salga”, eso no significa que la solución sea buena.
Forzar CSS cuando el icono ya pide SVG
Este es el error más común. Si la forma necesita demasiados trucos, quizá ya no sea una buena candidata para CSS.
Usar demasiados valores mágicos
Muchos top, left, right y width sin sistema detrás pueden volver el código difícil de mantener.
Dibujar demasiado pequeño
Un icono minúsculo pierde definición y obliga a hacer más esfuerzo visual.
No cuidar la accesibilidad
Si el icono es decorativo, debe ir con aria-hidden="true". Si representa una acción sin texto visible, el botón o enlace debe tener un nombre accesible.
En iconografía de interfaz, la creatividad tiene que convivir con el reconocimiento inmediato. Si el usuario duda, el sistema pierde claridad.
Buenas prácticas para crear iconos CSS mantenibles
Conviene cerrar la parte técnica con recomendaciones aplicables en proyectos reales.
Usa variables y patrones comunes
Te ayudarán a mantener coherencia entre tamaños, grosores y espaciados.
Piensa primero en la forma mínima necesaria
Antes de escribir código, pregúntate si el icono puede resolverse con dos o tres piezas simples.
Mantén un estilo consistente
No mezcles iconos muy gruesos con otros extremadamente finos si forman parte del mismo sistema.
Prueba siempre a tamaño real
Un icono puede parecer correcto ampliado, pero no funcionar dentro de un botón de 40 píxeles.
Diseña para lectura rápida
La prioridad no es demostrar una técnica ingeniosa, sino hacer que la persona usuaria entienda la acción sin fricción.
Cuándo usar iconos con CSS en un proyecto real
La respuesta más honesta es: úsalos cuando simplifican, no cuando complican.
Funcionan muy bien en:
botones de cerrar
controles de acordeón
microinteracciones
estados simples
flechas básicas
prototipos
componentes ligeros
No suelen ser la mejor opción para:
sistemas completos de iconografía
iconos de marca
formas muy orgánicas
ilustraciones complejas
bibliotecas escalables de gran tamaño
Lo importante no es la pureza técnica, sino elegir lo que mejor resuelve el problema con el menor coste de mantenimiento.
Preguntas frecuentes sobre dibujar iconos con CSS
¿Es recomendable crear todos los iconos de una web solo con CSS?
No suele ser lo más práctico. CSS funciona muy bien para iconos básicos y geométricos, pero cuando el sistema crece o los iconos se vuelven más complejos, SVG suele ofrecer más control y mejor mantenimiento.
¿Los iconos con CSS son buenos para animaciones?
Sí, especialmente para microinteracciones sencillas. Cambios de estado, desplazamientos, rotaciones o transformaciones pequeñas suelen resolverse muy bien con CSS.
¿Dibujar con CSS mejora siempre el rendimiento?
No siempre. Puede evitar recursos externos en casos simples, pero si el icono requiere demasiadas capas, sombras o ajustes complejos, el beneficio deja de ser tan claro.
Iconografía en CSS: cuando la simplicidad mejora la experiencia
Explorar cómo dibujar iconos sencillos con CSS sin usar SVG ni imágenes no es solo un ejercicio técnico. También es una forma muy útil de entrenar criterio visual.
Cuando reduces una forma a líneas, bordes, radios y transformaciones, te obligas a pensar qué parte del dibujo es realmente necesaria para comunicar. Y ese ejercicio conecta directamente con algo esencial en UX: hacer que las decisiones sean fáciles de tomar.
Un icono claro reduce dudas. Un icono ambiguo las aumenta. Un sistema coherente baja la carga cognitiva. Un sistema inconsistente la eleva. Por eso, aunque hablemos de detalles pequeños, estamos hablando de experiencia de usuario en sentido amplio.
En el fondo, dibujar con hojas de estilo no consiste solo en ahorrar un SVG. Consiste en entender cómo una interfaz comunica con la menor fricción posible. Y cuando ese objetivo se cumple, incluso un simple icono puede mejorar mucho más de lo que parece.
Cuando hablamos de dibujar con CSS, mucha gente piensa en pequeños trucos visuales o en experimentos creativos sin demasiada utilidad práctica. Pero lo cierto es que las formas básicas con CSS siguen teniendo muchísimo valor en proyectos reales. No solo sirven para decorar: también ayudan a construir interfaces más ligeras, más coherentes y más fáciles de mantener.
Un círculo, un triángulo, un óvalo o una estrella pueden convertirse en piezas funcionales dentro de un sistema de diseño. Pueden actuar como indicadores, botones, insignias, flechas, ratings o elementos de apoyo visual. Y lo mejor es que, al estar hechos con hojas de estilo, suelen ser más fáciles de adaptar a cambios de color, tamaño, interacción o contexto que una imagen fija.
Además, este tema encaja muy bien con una idea importante en diseño de interfaz: el equilibrio entre tiempo de decisión y carga cognitiva. Porque una forma no solo ocupa espacio. También comunica. Le dice al usuario qué mirar, qué tocar, qué priorizar o qué interpretar.
En este artículo vamos a ver cómo dibujar formas básicas con CSS de forma técnica, clara y útil. Verás ejemplos prácticos, recomendaciones para diseño e interacción y varios criterios para decidir cuándo una forma ayuda de verdad y cuándo empieza a generar ruido visual.
Por qué dibujar con CSS sigue teniendo sentido hoy
Aunque hoy tenemos SVG, canvas, librerías visuales y herramientas de diseño más sofisticadas, dibujar con CSS sigue teniendo sentido en muchos escenarios. Sobre todo cuando hablamos de formas simples que forman parte de componentes de interfaz.
Las ventajas más claras son estas:
Reduces dependencias externas.
Mantienes la coherencia visual desde el propio CSS del proyecto.
Puedes modificar color, tamaño o comportamiento con mucha facilidad.
Integras mejor estados interactivos como hover, focus-visible o active.
Favoreces el mantenimiento, porque no dependes de múltiples assets para pequeñas piezas visuales.
Por ejemplo, un círculo puede servir para indicar estado, un triángulo puede resolver la flecha de un tooltip, un óvalo puede funcionar como botón tipo cápsula y una estrella puede integrarse en un sistema de valoración.
La clave no está en usar CSS para todo, sino en saber cuándo es una buena decisión.
Cuándo conviene usar CSS para dibujar formas
Usa CSS cuando:
la forma es simple
necesitas personalizarla fácilmente
quieres reutilizarla dentro de un componente
quieres animarla o añadir interacción
no merece la pena cargar una imagen o un SVG para algo tan básico
Cuándo quizá no es la mejor opción
En cambio, quizá sea mejor recurrir a SVG cuando:
la forma es compleja
necesitas muchísima precisión
el icono tiene demasiados detalles internos
quieres controlar trazados complejos
el recurso visual tiene más peso gráfico que funcional
Dicho de otra forma: las formas básicas con CSS funcionan especialmente bien cuando forman parte del lenguaje de interfaz, no cuando intentas forzar CSS para resolver ilustraciones complejas.
Qué necesitas entender antes de empezar a dibujar formas con CSS
Antes de meternos con círculos, triángulos, óvalos y estrellas, conviene tener claras algunas bases. La mayoría de formas CSS nacen de combinar cuatro ideas muy sencillas.
Tamaño del elemento
Muchas formas parten de un bloque con width y height.
Aquí ya no estamos hablando solo de dibujar con CSS, sino de construir un componente con interacción y accesibilidad.
Cómo afecta un círculo al tiempo de decisión
Un botón circular suele transmitir inmediatez. Si está bien ubicado y no compite con demasiados elementos, puede reducir el tiempo de decisión: el usuario lo detecta rápido y entiende que ahí hay una acción destacada.
Pero cuidado. Si llenas la interfaz de círculos, colores potentes, sombras y animaciones, ocurre justo lo contrario: sube la carga cognitiva. El usuario tiene demasiadas señales compitiendo entre sí.
Por eso, incluso cuando una forma funciona técnicamente, conviene preguntarse si también funciona comunicativamente.
Cómo dibujar óvalos con CSS
El óvalo sigue el mismo principio que el círculo, pero cambiando la proporción entre ancho y alto.
Este patrón es muy útil porque el contenido define el tamaño y el acabado sigue siendo ovalado gracias a un border-radius muy alto.
Óvalos y jerarquía visual
Los óvalos suelen aportar cercanía y suavidad. Pero si todas las acciones de una interfaz usan la misma forma redondeada, la jerarquía se aplana. Todo empieza a parecer igual de importante.
Y cuando todo parece igual de importante, el usuario tarda más en decidir. Es decir: más tiempo de decisión y más carga cognitiva.
Aquí CSS no resuelve solo lo visual. También influye en cómo se lee y se prioriza una interfaz.
Cómo hacer triángulos con CSS
El triángulo clásico se construye usando bordes sobre un elemento sin ancho ni alto.
Este es uno de los ejemplos más prácticos de formas básicas con CSS en interfaces reales.
Cuándo un triángulo ayuda y cuándo sobra
Un triángulo puede ser muy útil para indicar dirección, procedencia o relación espacial. Pero también se abusa mucho de él. A veces se mete una flecha en todos los tooltips, menús y cajas informativas aunque no haga falta.
Cada forma extra añade una señal visual más. Y cada señal compite por atención. Si una forma no aporta claridad, puede acabar aumentando la carga cognitiva en lugar de reducirla.
Cómo dibujar estrellas con CSS
La estrella ya entra en un terreno algo más avanzado. Hoy, una de las formas más cómodas de resolverla es con clip-path.
Este patrón encaja muy bien en productos digitales porque combina forma, estado e interacción.
La estrella como símbolo cargado de significado
La estrella no es neutral. Suele comunicar favorito, premio, valoración o destaque. Precisamente por eso conviene usarla con intención.
Si conviertes cualquier cosa “importante” en estrella, la interfaz pierde precisión. El usuario deja de entender qué significa realmente cada símbolo y eso complica la lectura.
Otra vez aparece el mismo criterio: menos ruido visual, más claridad.
Cómo aplicar estas formas a diseño e interacción de forma inteligente
Hasta aquí hemos visto la parte técnica. Ahora toca hablar de diseño de verdad.
Usa círculos para acciones o estados muy concretos
Funcionan muy bien en:
botones flotantes
indicadores de estado
pasos de un proceso
puntos de navegación
Usa triángulos para reforzar dirección o procedencia
Son útiles en:
tooltips
flechas
menús desplegables
indicadores visuales de apertura o cierre
Usa óvalos para suavizar la lectura de acciones secundarias
Encajan muy bien en:
tags
botones secundarios
labels
chips de filtros
Usa estrellas para destacar valoraciones o elementos favoritos
No las conviertas en un recurso decorativo genérico. Funcionan mejor cuando tienen una función clara.
Tiempo de decisión vs. carga cognitiva: la parte que más importa
Este es el punto que puede marcar la diferencia entre un artículo correcto y uno realmente útil.
Cuando introduces una forma en una interfaz, no solo estás resolviendo un detalle visual. Estás afectando a cómo la persona interpreta la pantalla.
Qué es el tiempo de decisión
Es el tiempo que tarda alguien en entender qué acción tiene más peso, qué elemento debe mirar primero o qué camino seguir.
Qué es la carga cognitiva
Es el esfuerzo mental que necesita para procesar toda esa información.
Cómo influyen las formas CSS en esa relación
Una forma bien usada puede reducir el tiempo de decisión:
un triángulo señala dirección
un círculo destaca una acción
un óvalo agrupa contenido de forma amable
una estrella subraya una valoración
Pero una forma mal usada hace lo contrario:
añade ruido
compite con otros elementos
genera dudas
dificulta la jerarquía visual
En otras palabras: no basta con saber cómo dibujar con CSS. También hay que saber cuándo una forma mejora la comprensión y cuándo solo añade decoración innecesaria.
Un filtro rápido para tomar mejores decisiones
Antes de añadir una forma, pregúntate:
¿aporta significado?
¿refuerza la jerarquía?
¿ayuda a decidir más rápido?
¿encaja con el sistema visual del proyecto?
¿podría resolverse con menos elementos?
Si la respuesta es no en varios puntos, probablemente esa forma no está ayudando tanto como parece.
Errores comunes al dibujar formas básicas con CSS
Hay varios errores que se repiten muchísimo, sobre todo cuando se experimenta con CSS desde un enfoque más visual.
Usar formas porque sí
Que una forma sea vistosa no significa que sea útil. Si no comunica nada, probablemente sobra.
Abusar de tamaños fijos
Un componente que se ve bien a 120 píxeles puede romperse por completo en móvil si no piensas en escalabilidad.
Descuidar la accesibilidad
Si la forma es interactiva, debe tener foco visible, área clicable suficiente y una etiqueta accesible si corresponde.
Recargar demasiado la composición
Sombras, brillos, animaciones, bordes, gradientes, rotaciones y colores intensos al mismo tiempo suelen generar más espectáculo que claridad.
Olvidar el mantenimiento
Una forma muy rebuscada puede parecer brillante en el momento, pero convertirse en un problema cuando tengas que editarla o reutilizarla dentro de tres meses.
Buenas prácticas para usar formas CSS en proyectos reales
Integra estas formas en tu sistema de diseño
No las trates como experimentos aislados. Define variables para color, radio, transición y tamaños.
No construyas “una estrella bonita”. Construye una estrella que pueda servir como favorito, rating o marcador destacado.
Usa pseudo-elementos cuando tenga sentido
::before y ::after te ayudan a evitar HTML innecesario.
Valida el resultado en contexto
Una forma puede verse bien aislada y funcionar fatal dentro de una interfaz real. Prueba siempre el componente en su contexto.
No confundas creatividad con saturación
Una interfaz no mejora por tener más formas, más adornos o más recursos visuales. Mejora cuando guía mejor.
Preguntas frecuentes sobre dibujar con CSS
¿Es mejor usar CSS o SVG para formas básicas?
Para formas básicas con CSS, como círculos, triángulos, óvalos o estrellas sencillas, CSS suele ser una opción excelente. SVG es mejor cuando necesitas más precisión o complejidad.
¿Dibujar con CSS perjudica el rendimiento?
En general, no. De hecho, puede simplificar recursos en algunos casos. El problema aparece cuando añades demasiados efectos pesados o animaciones innecesarias.
¿Se pueden animar estas formas con CSS?
Sí. Puedes animar escala, rotación, posición, opacidad, color y muchos otros aspectos. La clave está en que la animación tenga una función y no incremente la carga cognitiva sin aportar valor.
Cuando una forma deja de ser adorno y empieza a comunicar
Aprender a dibujar con CSS no consiste solo en memorizar trucos para crear círculos, triángulos, óvalos o estrellas. La parte técnica importa, claro. Pero lo realmente interesante aparece cuando entiendes que cada forma es también una decisión de diseño.
Una forma puede hacer que una interfaz se entienda mejor o puede complicarla. Puede guiar o distraer. Puede reducir el tiempo de decisión o aumentar la carga cognitiva. Y ese es el verdadero criterio que deberías aplicar al usar hojas de estilo para construir elementos visuales.
Por eso, cuando trabajes con formas básicas con CSS, no pienses solo en si puedes hacerlas. Piensa en si merece la pena hacerlas, en qué están comunicando y en cómo afectan a la lectura general de la interfaz.
