{"id":18972,"date":"2026-04-08T16:41:38","date_gmt":"2026-04-08T14:41:38","guid":{"rendered":"https:\/\/martagonzalez.dev\/wp\/blog\/\/"},"modified":"2026-04-08T18:50:32","modified_gmt":"2026-04-08T16:50:32","slug":"dibujar-formas-basicas-con-css","status":"publish","type":"post","link":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/","title":{"rendered":"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas"},"content":{"rendered":"
<\/div>
<\/div><\/div>\n
\"\"<\/figure>\n\n\n\n

Cuando hablamos de dibujar con CSS<\/strong>, mucha gente piensa en peque\u00f1os trucos visuales o en experimentos creativos sin demasiada utilidad pr\u00e1ctica. Pero lo cierto es que las formas b\u00e1sicas con CSS<\/strong> siguen teniendo much\u00edsimo valor en proyectos reales. No solo sirven para decorar: tambi\u00e9n ayudan a construir interfaces m\u00e1s ligeras, m\u00e1s coherentes y m\u00e1s f\u00e1ciles de mantener.<\/p>\n\n\n\n

Un c\u00edrculo, un tri\u00e1ngulo, un \u00f3valo o una estrella pueden convertirse en piezas funcionales dentro de un sistema de dise\u00f1o. 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<\/strong>, suelen ser m\u00e1s f\u00e1ciles de adaptar a cambios de color, tama\u00f1o, interacci\u00f3n o contexto que una imagen fija.<\/p>\n\n\n\n

Adem\u00e1s, este tema encaja muy bien con una idea importante en dise\u00f1o de interfaz: el equilibrio entre tiempo de decisi\u00f3n y carga cognitiva<\/strong>. Porque una forma no solo ocupa espacio. Tambi\u00e9n comunica. Le dice al usuario qu\u00e9 mirar, qu\u00e9 tocar, qu\u00e9 priorizar o qu\u00e9 interpretar.<\/p>\n\n\n\n

En este art\u00edculo vamos a ver c\u00f3mo dibujar formas b\u00e1sicas con CSS<\/strong> de forma t\u00e9cnica, clara y \u00fatil. Ver\u00e1s ejemplos pr\u00e1cticos, recomendaciones para dise\u00f1o e interacci\u00f3n y varios criterios para decidir cu\u00e1ndo una forma ayuda de verdad y cu\u00e1ndo empieza a generar ruido visual.<\/p>\n\n\n\n

<\/div>\n\n\n\n

Por qu\u00e9 dibujar con CSS sigue teniendo sentido hoy<\/h2>\n\n\n\n

Aunque hoy tenemos SVG, canvas, librer\u00edas visuales y herramientas de dise\u00f1o m\u00e1s sofisticadas, dibujar con CSS<\/strong> sigue teniendo sentido en muchos escenarios. Sobre todo cuando hablamos de formas simples que forman parte de componentes de interfaz.<\/p>\n\n\n\n

Las ventajas m\u00e1s claras son estas:<\/p>\n\n\n\n

    \n
  • Reduces dependencias externas<\/strong>.<\/li>\n\n\n\n
  • Mantienes la coherencia visual desde el propio CSS del proyecto<\/strong>.<\/li>\n\n\n\n
  • Puedes modificar color, tama\u00f1o o comportamiento con mucha facilidad<\/strong>.<\/li>\n\n\n\n
  • Integras mejor estados interactivos<\/strong> como hover<\/code>, focus-visible<\/code> o active<\/code>.<\/li>\n\n\n\n
  • Favoreces el mantenimiento<\/strong>, porque no dependes de m\u00faltiples assets para peque\u00f1as piezas visuales.<\/li>\n<\/ul>\n\n\n\n

    Por ejemplo, un c\u00edrculo puede servir para indicar estado, un tri\u00e1ngulo puede resolver la flecha de un tooltip, un \u00f3valo puede funcionar como bot\u00f3n tipo c\u00e1psula y una estrella puede integrarse en un sistema de valoraci\u00f3n.<\/p>\n\n\n\n

    La clave no est\u00e1 en usar CSS para todo, sino en saber cu\u00e1ndo es una buena decisi\u00f3n.<\/p>\n\n\n\n

    Cu\u00e1ndo conviene usar CSS para dibujar formas<\/h3>\n\n\n\n

    Usa CSS cuando:<\/p>\n\n\n\n

      \n
    • la forma es simple<\/li>\n\n\n\n
    • necesitas personalizarla f\u00e1cilmente<\/li>\n\n\n\n
    • quieres reutilizarla dentro de un componente<\/li>\n\n\n\n
    • quieres animarla o a\u00f1adir interacci\u00f3n<\/li>\n\n\n\n
    • no merece la pena cargar una imagen o un SVG para algo tan b\u00e1sico<\/li>\n<\/ul>\n\n\n\n

      Cu\u00e1ndo quiz\u00e1 no es la mejor opci\u00f3n<\/h3>\n\n\n\n

      En cambio, quiz\u00e1 sea mejor recurrir a SVG cuando:<\/p>\n\n\n\n

        \n
      • la forma es compleja<\/li>\n\n\n\n
      • necesitas much\u00edsima precisi\u00f3n<\/li>\n\n\n\n
      • el icono tiene demasiados detalles internos<\/li>\n\n\n\n
      • quieres controlar trazados complejos<\/li>\n\n\n\n
      • el recurso visual tiene m\u00e1s peso gr\u00e1fico que funcional<\/li>\n<\/ul>\n\n\n\n

        Dicho de otra forma: las formas b\u00e1sicas con CSS funcionan especialmente bien cuando forman parte del lenguaje de interfaz<\/strong>, no cuando intentas forzar CSS para resolver ilustraciones complejas.<\/p>\n\n\n\n

        <\/div>\n\n\n\n

        Qu\u00e9 necesitas entender antes de empezar a dibujar formas con CSS<\/h2>\n\n\n\n

        Antes de meternos con c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas, conviene tener claras algunas bases. La mayor\u00eda de formas CSS nacen de combinar cuatro ideas muy sencillas.<\/p>\n\n\n\n

        Tama\u00f1o del elemento<\/h3>\n\n\n\n

        Muchas formas parten de un bloque con width<\/code> y height<\/code>.<\/p>\n\n\n\n

        .shape {\n  width: 100px;\n  height: 100px;\n  background: #cc2b5e;\n}<\/code><\/pre>\n\n\n\n
        Con eso tienes un cuadrado. A partir de ah\u00ed, CSS transforma esa base.<\/p>\n\n\n\n
        border-radius<\/code><\/h3>\n\n\n\n
        Es la propiedad clave para redondear esquinas y crear c\u00edrculos u \u00f3valos.<\/p>\n\n\n\n
        Bordes<\/h3>\n\n\n\n
        Los bordes permiten construir tri\u00e1ngulos sin necesidad de contenido interno. Es uno de los trucos m\u00e1s conocidos del CSS.<\/p>\n\n\n\n
        clip-path<\/code><\/h3>\n\n\n\n
        Es especialmente \u00fatil para recortar formas m\u00e1s complejas, como estrellas o pol\u00edgonos personalizados.<\/p>\n\n\n\n
        Pseudo-elementos<\/h3>\n\n\n\n
        ::before<\/code> y ::after<\/code> te permiten sumar piezas a una forma sin ensuciar el HTML con div<\/code> extra.<\/p>\n\n\n\n
        <\/div>\n\n\n\n
        C\u00f3mo hacer c\u00edrculos con CSS<\/h2>\n\n\n\n
        El c\u00edrculo es la forma m\u00e1s directa de construir. Solo necesitas un elemento cuadrado y redondearlo al 50%.<\/p>\n\n\n\n
        <div class=\"circulo\"><\/div>\n<\/pre>\n\n\n\n
        .circulo {\n  width: 120px;\n  height: 120px;\n  background: #cc2b5e;\n  border-radius: 50%;\n}<\/code><\/pre>\n\n\n\n
        El resultado es un c\u00edrculo perfecto porque ancho y alto tienen la misma medida.<\/p>\n\n\n\n
        D\u00f3nde usar c\u00edrculos en una interfaz<\/h3>\n\n\n\n
        Los c\u00edrculos aparecen much\u00edsimo en dise\u00f1o digital. Por ejemplo:<\/p>\n\n\n\n
          \n
        • indicadores de estado<\/li>\n\n\n\n
        • avatares<\/li>\n\n\n\n
        • botones flotantes<\/li>\n\n\n\n
        • puntos de navegaci\u00f3n<\/li>\n\n\n\n
        • insignias<\/li>\n\n\n\n
        • marcadores visuales<\/li>\n\n\n\n
        • loaders<\/li>\n<\/ul>\n\n\n\n
          Su forma tiene una ventaja clara: destaca r\u00e1pido y se percibe como compacta y f\u00e1cil de identificar.<\/p>\n\n\n\n
          Ejemplo pr\u00e1ctico: bot\u00f3n circular interactivo<\/h3>\n\n\n\n
          <button class=\"circle-button\">+<\/button><\/pre>\n\n\n\n
          .circle-button {
            width: 64px;
            height: 64px;
            border: none;
            border-radius: 50%;
            background: #cc2b5e;
            color: #fff;
            font-size: 2rem;
            cursor: pointer;
            transition: transform 0.25s ease, box-shadow 0.25s ease;
          }.circle-button:hover {
            transform: scale(1.08);
            box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);
          }.circle-button:focus-visible {
            outline: 3px solid #753a88;
            outline-offset: 4px;
          }<\/pre>\n\n\n\n
          Aqu\u00ed ya no estamos hablando solo de dibujar con CSS<\/em>, sino de construir un componente con interacci\u00f3n y accesibilidad.<\/p>\n\n\n\n
          C\u00f3mo afecta un c\u00edrculo al tiempo de decisi\u00f3n<\/h3>\n\n\n\n
          Un bot\u00f3n circular suele transmitir inmediatez. Si est\u00e1 bien ubicado y no compite con demasiados elementos, puede reducir el tiempo de decisi\u00f3n<\/strong>: el usuario lo detecta r\u00e1pido y entiende que ah\u00ed hay una acci\u00f3n destacada.<\/p>\n\n\n\n
          Pero cuidado. Si llenas la interfaz de c\u00edrculos, colores potentes, sombras y animaciones, ocurre justo lo contrario: sube la carga cognitiva<\/strong>. El usuario tiene demasiadas se\u00f1ales compitiendo entre s\u00ed.<\/p>\n\n\n\n
          Por eso, incluso cuando una forma funciona t\u00e9cnicamente, conviene preguntarse si tambi\u00e9n funciona comunicativamente.<\/p>\n\n\n\n
          <\/div>\n\n\n\n
          C\u00f3mo dibujar \u00f3valos con CSS<\/h2>\n\n\n\n
          El \u00f3valo sigue el mismo principio que el c\u00edrculo, pero cambiando la proporci\u00f3n entre ancho y alto.<\/p>\n\n\n\n
          <div class=\"ovalo\"><\/div>\n\n.ovalo {\n  width: 180px;\n  height: 100px;\n  background: #f8e0ea;\n  border-radius: 50%;\n}<\/code><\/pre>\n\n\n\n
          Al mantener el redondeo, pero alterar las dimensiones, aparece la forma ovalada.<\/p>\n\n\n\n
          Usos habituales del \u00f3valo en dise\u00f1o UI<\/h3>\n\n\n\n
          Los \u00f3valos tienen una est\u00e9tica m\u00e1s suave y org\u00e1nica. Funcionan muy bien para:<\/p>\n\n\n\n
            \n
          • botones tipo pill<\/li>\n\n\n\n
          • etiquetas<\/li>\n\n\n\n
          • chips<\/li>\n\n\n\n
          • categor\u00edas<\/li>\n\n\n\n
          • fondos decorativos suaves<\/li>\n\n\n\n
          • contenedores de acciones secundarias<\/li>\n<\/ul>\n\n\n\n
            Ejemplo pr\u00e1ctico: bot\u00f3n c\u00e1psula<\/h3>\n\n\n\n
            <a href=\"#\" class=\"pill-button\">Leer m\u00e1s<\/a>\n\n.pill-button {\n  display: inline-block;\n  padding: 0.9rem 1.4rem;\n  background: #753a88;\n  color: #fff;\n  text-decoration: none;\n  border-radius: 999px;\n  transition: background 0.2s ease, transform 0.2s ease;\n}\n.pill-button:hover {\n  background: #5f2d6f;\n  transform: translateY(-2px);\n}\n.pill-button:focus-visible {\n  outline: 3px solid #cc2b5e;\n  outline-offset: 4px;\n}<\/code><\/pre>\n\n\n\n
            Este patr\u00f3n es muy \u00fatil porque el contenido define el tama\u00f1o y el acabado sigue siendo ovalado gracias a un border-radius<\/code> muy alto.<\/p>\n\n\n\n
            \u00d3valos y jerarqu\u00eda visual<\/h4>\n\n\n\n
            Los \u00f3valos suelen aportar cercan\u00eda y suavidad. Pero si todas las acciones de una interfaz usan la misma forma redondeada, la jerarqu\u00eda se aplana. Todo empieza a parecer igual de importante.<\/p>\n\n\n\n
            Y cuando todo parece igual de importante, el usuario tarda m\u00e1s en decidir. Es decir: m\u00e1s tiempo de decisi\u00f3n y m\u00e1s carga cognitiva<\/strong>.<\/p>\n\n\n\n
            Aqu\u00ed CSS no resuelve solo lo visual. Tambi\u00e9n influye en c\u00f3mo se lee y se prioriza una interfaz.<\/p>\n\n\n\n
            <\/div>\n\n\n\n
            C\u00f3mo hacer tri\u00e1ngulos con CSS<\/h2>\n\n\n\n
            El tri\u00e1ngulo cl\u00e1sico se construye usando bordes sobre un elemento sin ancho ni alto.<\/p>\n\n\n\n
            <div class=\"triangulo\"><\/div><\/pre>\n\n\n\n
            .triangulo {
              width: 0;
              height: 0;
              border-left: 50px solid transparent;
              border-right: 50px solid transparent;
              border-bottom: 80px solid #cc2b5e;
            }<\/pre>\n\n\n\n
            La forma aparece porque el elemento no tiene caja interior visible y el borde inferior es el \u00fanico coloreado.<\/p>\n\n\n\n
            Variantes seg\u00fan la direcci\u00f3n<\/h3>\n\n\n\n
            Tri\u00e1ngulo hacia arriba<\/h4>\n\n\n\n
            .triangulo-up {
              width: 0;
              height: 0;
              border-left: 40px solid transparent;
              border-right: 40px solid transparent;
              border-bottom: 60px solid #753a88;
            }<\/pre>\n\n\n\n
            Tri\u00e1ngulo hacia abajo<\/h4>\n\n\n\n
            .triangulo-down {
              width: 0;
              height: 0;
              border-left: 40px solid transparent;
              border-right: 40px solid transparent;
              border-top: 60px solid #753a88;
            }<\/pre>\n\n\n\n
            Tri\u00e1ngulo hacia la derecha<\/h4>\n\n\n\n
            .triangulo-right {
              width: 0;
              height: 0;
              border-top: 30px solid transparent;
              border-bottom: 30px solid transparent;
              border-left: 50px solid #753a88;
            }<\/pre>\n\n\n\n
            Ejemplo pr\u00e1ctico: flecha de tooltip<\/h3>\n\n\n\n
            <div class=\"tooltip\">
              Texto del tooltip
              <span class=\"tooltip-arrow\"><\/span>
            <\/div><\/pre>\n\n\n\n
            .tooltip {
              position: relative;
              display: inline-block;
              background: #020101;
              color: white;
              padding: 0.75rem 1rem;
              border-radius: 10px;
            }.tooltip-arrow {
              position: absolute;
              bottom: -10px;
              left: 20px;
              width: 0;
              height: 0;
              border-left: 10px solid transparent;
              border-right: 10px solid transparent;
              border-top: 10px solid #020101;
            }<\/pre>\n\n\n\n
            Este es uno de los ejemplos m\u00e1s pr\u00e1cticos de formas b\u00e1sicas con CSS<\/strong> en interfaces reales.<\/p>\n\n\n\n
            Cu\u00e1ndo un tri\u00e1ngulo ayuda y cu\u00e1ndo sobra<\/h4>\n\n\n\n
            Un tri\u00e1ngulo puede ser muy \u00fatil para indicar direcci\u00f3n, procedencia o relaci\u00f3n espacial. Pero tambi\u00e9n se abusa mucho de \u00e9l. A veces se mete una flecha en todos los tooltips, men\u00fas y cajas informativas aunque no haga falta.<\/p>\n\n\n\n
            Cada forma extra a\u00f1ade una se\u00f1al visual m\u00e1s. Y cada se\u00f1al compite por atenci\u00f3n. Si una forma no aporta claridad, puede acabar aumentando la carga cognitiva en lugar de reducirla.<\/p>\n\n\n\n
            <\/div>\n\n\n\n
            C\u00f3mo dibujar estrellas con CSS<\/h2>\n\n\n\n
            La estrella ya entra en un terreno algo m\u00e1s avanzado. Hoy, una de las formas m\u00e1s c\u00f3modas de resolverla es con clip-path<\/code>.<\/p>\n\n\n\n
            <div class=\"estrella\"><\/div><\/pre>\n\n\n\n
            .estrella {
              width: 120px;
              aspect-ratio: 1;
              background: gold;
              clip-path: polygon(
                50% 0%,
                61% 35%,
                98% 35%,
                68% 57%,
                79% 91%,
                50% 70%,
                21% 91%,
                32% 57%,
                2% 35%,
                39% 35%
              );
            }<\/pre>\n\n\n\n
            Aqu\u00ed lo que haces es partir de una caja y recortarla siguiendo un conjunto de coordenadas.<\/p>\n\n\n\n
            Ejemplo pr\u00e1ctico: estrella para rating<\/h3>\n\n\n\n
            <button class=\"rating-star\" aria-label=\"Valorar con 5 estrellas\"><\/button><\/pre>\n\n\n\n
            .rating-star {
              width: 48px;
              aspect-ratio: 1;
              border: none;
              cursor: pointer;
              background: #f5c542;
              clip-path: polygon(
                50% 0%,
                61% 35%,
                98% 35%,
                68% 57%,
                79% 91%,
                50% 70%,
                21% 91%,
                32% 57%,
                2% 35%,
                39% 35%
              );
              transition: transform 0.2s ease, filter 0.2s ease;
            }.rating-star:hover {
              transform: scale(1.1);
              filter: brightness(1.05);
            }.rating-star:focus-visible {
              outline: 3px solid #753a88;
              outline-offset: 6px;
            }<\/pre>\n\n\n\n
            Este patr\u00f3n encaja muy bien en productos digitales porque combina forma, estado e interacci\u00f3n.<\/p>\n\n\n\n
            La estrella como s\u00edmbolo cargado de significado<\/h4>\n\n\n\n
            La estrella no es neutral. Suele comunicar favorito, premio, valoraci\u00f3n o destaque. Precisamente por eso conviene usarla con intenci\u00f3n.<\/p>\n\n\n\n
            Si conviertes cualquier cosa \u201cimportante\u201d en estrella, la interfaz pierde precisi\u00f3n. El usuario deja de entender qu\u00e9 significa realmente cada s\u00edmbolo y eso complica la lectura.<\/p>\n\n\n\n
            Otra vez aparece el mismo criterio: menos ruido visual, m\u00e1s claridad<\/strong>.<\/p>\n\n\n\n
            <\/div>\n\n\n\n
            C\u00f3mo aplicar estas formas a dise\u00f1o e interacci\u00f3n de forma inteligente<\/h2>\n\n\n\n
            Hasta aqu\u00ed hemos visto la parte t\u00e9cnica. Ahora toca hablar de dise\u00f1o de verdad.<\/p>\n\n\n\n
            Usa c\u00edrculos para acciones o estados muy concretos<\/h3>\n\n\n\n
            Funcionan muy bien en:<\/p>\n\n\n\n
              \n
            • botones flotantes<\/li>\n\n\n\n
            • indicadores de estado<\/li>\n\n\n\n
            • pasos de un proceso<\/li>\n\n\n\n
            • puntos de navegaci\u00f3n<\/li>\n<\/ul>\n\n\n\n
              Usa tri\u00e1ngulos para reforzar direcci\u00f3n o procedencia<\/h3>\n\n\n\n
              Son \u00fatiles en:<\/p>\n\n\n\n
                \n
              • tooltips<\/li>\n\n\n\n
              • flechas<\/li>\n\n\n\n
              • men\u00fas desplegables<\/li>\n\n\n\n
              • indicadores visuales de apertura o cierre<\/li>\n<\/ul>\n\n\n\n
                Usa \u00f3valos para suavizar la lectura de acciones secundarias<\/h3>\n\n\n\n
                Encajan muy bien en:<\/p>\n\n\n\n
                  \n
                • tags<\/li>\n\n\n\n
                • botones secundarios<\/li>\n\n\n\n
                • labels<\/li>\n\n\n\n
                • chips de filtros<\/li>\n<\/ul>\n\n\n\n
                  Usa estrellas para destacar valoraciones o elementos favoritos<\/h3>\n\n\n\n
                  No las conviertas en un recurso decorativo gen\u00e9rico. Funcionan mejor cuando tienen una funci\u00f3n clara.<\/p>\n\n\n\n
                  <\/div>\n\n\n\n
                  Tiempo de decisi\u00f3n vs. carga cognitiva: la parte que m\u00e1s importa<\/h2>\n\n\n\n
                  Este es el punto que puede marcar la diferencia entre un art\u00edculo correcto y uno realmente \u00fatil.<\/p>\n\n\n\n
                  Cuando introduces una forma en una interfaz, no solo est\u00e1s resolviendo un detalle visual. Est\u00e1s afectando a c\u00f3mo la persona interpreta la pantalla.<\/p>\n\n\n\n
                  Qu\u00e9 es el tiempo de decisi\u00f3n<\/h3>\n\n\n\n
                  Es el tiempo que tarda alguien en entender qu\u00e9 acci\u00f3n tiene m\u00e1s peso, qu\u00e9 elemento debe mirar primero o qu\u00e9 camino seguir.<\/p>\n\n\n\n
                  Qu\u00e9 es la carga cognitiva<\/h3>\n\n\n\n
                  Es el esfuerzo mental que necesita para procesar toda esa informaci\u00f3n.<\/p>\n\n\n\n
                  C\u00f3mo influyen las formas CSS en esa relaci\u00f3n<\/h3>\n\n\n\n
                  Una forma bien usada puede reducir el tiempo de decisi\u00f3n:<\/p>\n\n\n\n
                    \n
                  • un tri\u00e1ngulo se\u00f1ala direcci\u00f3n<\/li>\n\n\n\n
                  • un c\u00edrculo destaca una acci\u00f3n<\/li>\n\n\n\n
                  • un \u00f3valo agrupa contenido de forma amable<\/li>\n\n\n\n
                  • una estrella subraya una valoraci\u00f3n<\/li>\n<\/ul>\n\n\n\n
                    Pero una forma mal usada hace lo contrario:<\/p>\n\n\n\n
                      \n
                    • a\u00f1ade ruido<\/li>\n\n\n\n
                    • compite con otros elementos<\/li>\n\n\n\n
                    • genera dudas<\/li>\n\n\n\n
                    • dificulta la jerarqu\u00eda visual<\/li>\n<\/ul>\n\n\n\n
                      En otras palabras: no basta con saber c\u00f3mo dibujar con CSS<\/strong>. Tambi\u00e9n hay que saber cu\u00e1ndo una forma mejora la comprensi\u00f3n y cu\u00e1ndo solo a\u00f1ade decoraci\u00f3n innecesaria<\/strong>.<\/p>\n\n\n\n
                      Un filtro r\u00e1pido para tomar mejores decisiones<\/h4>\n\n\n\n
                      Antes de a\u00f1adir una forma, preg\u00fantate:<\/p>\n\n\n\n
                        \n
                      • \u00bfaporta significado?<\/li>\n\n\n\n
                      • \u00bfrefuerza la jerarqu\u00eda?<\/li>\n\n\n\n
                      • \u00bfayuda a decidir m\u00e1s r\u00e1pido?<\/li>\n\n\n\n
                      • \u00bfencaja con el sistema visual del proyecto?<\/li>\n\n\n\n
                      • \u00bfpodr\u00eda resolverse con menos elementos?<\/li>\n<\/ul>\n\n\n\n
                        Si la respuesta es no en varios puntos, probablemente esa forma no est\u00e1 ayudando tanto como parece.<\/p>\n\n\n\n
                        <\/div>\n\n\n\n
                        Errores comunes al dibujar formas b\u00e1sicas con CSS<\/h2>\n\n\n\n
                        Hay varios errores que se repiten much\u00edsimo, sobre todo cuando se experimenta con CSS desde un enfoque m\u00e1s visual.<\/p>\n\n\n\n
                        Usar formas porque s\u00ed<\/h3>\n\n\n\n
                        Que una forma sea vistosa no significa que sea \u00fatil. Si no comunica nada, probablemente sobra.<\/p>\n\n\n\n
                        Abusar de tama\u00f1os fijos<\/h3>\n\n\n\n
                        Un componente que se ve bien a 120 p\u00edxeles puede romperse por completo en m\u00f3vil si no piensas en escalabilidad.<\/p>\n\n\n\n
                        Descuidar la accesibilidad<\/h3>\n\n\n\n
                        Si la forma es interactiva, debe tener foco visible, \u00e1rea clicable suficiente y una etiqueta accesible si corresponde.<\/p>\n\n\n\n
                        Recargar demasiado la composici\u00f3n<\/h3>\n\n\n\n
                        Sombras, brillos, animaciones, bordes, gradientes, rotaciones y colores intensos al mismo tiempo suelen generar m\u00e1s espect\u00e1culo que claridad.<\/p>\n\n\n\n
                        Olvidar el mantenimiento<\/h3>\n\n\n\n
                        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.<\/p>\n\n\n\n
                        <\/div>\n\n\n\n
                        Buenas pr\u00e1cticas para usar formas CSS en proyectos reales<\/h2>\n\n\n\n
                        Integra estas formas en tu sistema de dise\u00f1o<\/h3>\n\n\n\n
                        No las trates como experimentos aislados. Define variables para color, radio, transici\u00f3n y tama\u00f1os.<\/p>\n\n\n\n
                        :root {
                          --color-primary: #cc2b5e;
                          --color-accent: #753a88;
                          --radius-full: 999px;
                          --transition-fast: 0.2s ease;
                        }<\/pre>\n\n\n\n
                        Piensa en componentes, no en demos sueltas<\/h3>\n\n\n\n
                        No construyas \u201cuna estrella bonita\u201d. Construye una estrella que pueda servir como favorito, rating o marcador destacado.<\/p>\n\n\n\n
                        Usa pseudo-elementos cuando tenga sentido<\/h3>\n\n\n\n
                        ::before<\/code> y ::after<\/code> te ayudan a evitar HTML innecesario.<\/p>\n\n\n\n
                        Valida el resultado en contexto<\/h3>\n\n\n\n
                        Una forma puede verse bien aislada y funcionar fatal dentro de una interfaz real. Prueba siempre el componente en su contexto.<\/p>\n\n\n\n
                        No confundas creatividad con saturaci\u00f3n<\/h3>\n\n\n\n
                        Una interfaz no mejora por tener m\u00e1s formas, m\u00e1s adornos o m\u00e1s recursos visuales. Mejora cuando gu\u00eda mejor.<\/p>\n\n\n\n
                        <\/div>\n\n\n\n
                        Preguntas frecuentes sobre dibujar con CSS<\/h2>\n\n\n\n
                        \u00bfEs mejor usar CSS o SVG para formas b\u00e1sicas?<\/h3>\n\n\n\n
                        Para formas b\u00e1sicas con CSS<\/strong>, como c\u00edrculos, tri\u00e1ngulos, \u00f3valos o estrellas sencillas, CSS suele ser una opci\u00f3n excelente. SVG es mejor cuando necesitas m\u00e1s precisi\u00f3n o complejidad.<\/p>\n\n\n\n
                        \u00bfDibujar con CSS perjudica el rendimiento?<\/h3>\n\n\n\n
                        En general, no. De hecho, puede simplificar recursos en algunos casos. El problema aparece cuando a\u00f1ades demasiados efectos pesados o animaciones innecesarias.<\/p>\n\n\n\n
                        \u00bfSe pueden animar estas formas con CSS?<\/h3>\n\n\n\n
                        S\u00ed. Puedes animar escala, rotaci\u00f3n, posici\u00f3n, opacidad, color y muchos otros aspectos. La clave est\u00e1 en que la animaci\u00f3n tenga una funci\u00f3n y no incremente la carga cognitiva sin aportar valor.<\/p>\n\n\n\n
                        <\/div>\n\n\n\n
                        \n\n\n\n
                        Cuando una forma deja de ser adorno y empieza a comunicar<\/h2>\n\n\n\n
                        Aprender a dibujar con CSS<\/strong> no consiste solo en memorizar trucos para crear c\u00edrculos, tri\u00e1ngulos, \u00f3valos o estrellas. La parte t\u00e9cnica importa, claro. Pero lo realmente interesante aparece cuando entiendes que cada forma es tambi\u00e9n una decisi\u00f3n de dise\u00f1o.<\/p>\n\n\n\n
                        Una forma puede hacer que una interfaz se entienda mejor o puede complicarla. Puede guiar o distraer. Puede reducir el tiempo de decisi\u00f3n o aumentar la carga cognitiva. Y ese es el verdadero criterio que deber\u00edas aplicar al usar hojas de estilo<\/strong> para construir elementos visuales.<\/p>\n\n\n\n
                        Por eso, cuando trabajes con formas b\u00e1sicas con CSS<\/strong>, no pienses solo en si puedes hacerlas. Piensa en si merece la pena hacerlas, en qu\u00e9 est\u00e1n comunicando y en c\u00f3mo afectan a la lectura general de la interfaz.<\/p>\n","protected":false},"excerpt":{"rendered":"
                        Aprende a dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, t\u00e9cnicas reutilizables y consejos de dise\u00f1o para mejorar la jerarqu\u00eda visual y reducir la carga cognitiva en interfaces.<\/p>\n","protected":false},"author":1,"featured_media":18977,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"mg_rating_sum":5,"mg_rating_count":1,"mg_rating_average":5,"footnotes":""},"categories":[82],"tags":[],"class_list":["post-18972","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"yoast_head":"\nC\u00f3mo dibujar formas b\u00e1sicas con CSS<\/title>\n<meta name=\"description\" content=\"Aprende c\u00f3mo dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, interacci\u00f3n y consejos de dise\u00f1o para reducir la carga cognitiva.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas\" \/>\n<meta property=\"og:description\" content=\"Aprende c\u00f3mo dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, interacci\u00f3n y consejos de dise\u00f1o para reducir la carga cognitiva.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/\" \/>\n<meta property=\"og:site_name\" content=\"Marta Gonz\u00e1lez - Desarrollo Front-end\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/profile.php?id=100031998110346\" \/>\n<meta property=\"article:published_time\" content=\"2026-04-08T14:41:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-04-08T16:50:32+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/04\/como-dibujar-formas-basicas-con-css.avif\" \/>\n\t<meta property=\"og:image:width\" content=\"1536\" \/>\n\t<meta property=\"og:image:height\" content=\"1024\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"marta\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"marta\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"10 minutos\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/\"},\"author\":{\"name\":\"marta\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"headline\":\"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas\",\"datePublished\":\"2026-04-08T14:41:38+00:00\",\"dateModified\":\"2026-04-08T16:50:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/\"},\"wordCount\":2319,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/como-dibujar-formas-basicas-con-css.avif\",\"articleSection\":[\"Blog\"],\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/\",\"name\":\"C\u00f3mo dibujar formas b\u00e1sicas con CSS\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/como-dibujar-formas-basicas-con-css.avif\",\"datePublished\":\"2026-04-08T14:41:38+00:00\",\"dateModified\":\"2026-04-08T16:50:32+00:00\",\"description\":\"Aprende c\u00f3mo dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, interacci\u00f3n y consejos de dise\u00f1o para reducir la carga cognitiva.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#breadcrumb\"},\"inLanguage\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#primaryimage\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/como-dibujar-formas-basicas-con-css.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2026\\\/04\\\/como-dibujar-formas-basicas-con-css.avif\",\"width\":1536,\"height\":1024,\"caption\":\"Representaci\u00f3n visual de c\u00f3mo dibujar formas b\u00e1sicas con CSS aplicada a dise\u00f1o web y creatividad digital.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/blog\\\/dibujar-formas-basicas-con-css\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Portada\",\"item\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#website\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/\",\"name\":\"Marta Gonz\u00e1lez\",\"description\":\"Desarrollo Front-end\",\"publisher\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\"},\"alternateName\":\"Marta Gonz\u00e1lez Desarrollo Frontend\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"es\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/#\\\/schema\\\/person\\\/3df598b4756cd72fec6126546267c738\",\"name\":\"marta\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"contentUrl\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\",\"width\":575,\"height\":575,\"caption\":\"marta\"},\"logo\":{\"@id\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/wp-content\\\/uploads\\\/2025\\\/05\\\/cropped-logo-martagonzalez.avif\"},\"description\":\"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.\",\"sameAs\":[\"https:\\\/\\\/martagonzalez.dev\\\/wp\",\"https:\\\/\\\/www.facebook.com\\\/profile.php?id=100031998110346\",\"https:\\\/\\\/www.instagram.com\\\/mcgweb\",\"https:\\\/\\\/www.linkedin.com\\\/in\\\/martacg\\\/\",\"marta\"],\"birthDate\":\"1986-01-07\",\"gender\":\"mujer\",\"knowsAbout\":[\"HTML5\",\"CSS3\",\"Javascript\"],\"jobTitle\":\"Desarrollo Frontend\",\"url\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/author\\\/marta\\\/\",\"publishingPrinciples\":\"https:\\\/\\\/martagonzalez.dev\\\/wp\\\/politica-de-privacidad\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"C\u00f3mo dibujar formas b\u00e1sicas con CSS","description":"Aprende c\u00f3mo dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, interacci\u00f3n y consejos de dise\u00f1o para reducir la carga cognitiva.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/","og_locale":"es_ES","og_type":"article","og_title":"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas","og_description":"Aprende c\u00f3mo dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, interacci\u00f3n y consejos de dise\u00f1o para reducir la carga cognitiva.","og_url":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/","og_site_name":"Marta Gonz\u00e1lez - Desarrollo Front-end","article_publisher":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_author":"https:\/\/www.facebook.com\/profile.php?id=100031998110346","article_published_time":"2026-04-08T14:41:38+00:00","article_modified_time":"2026-04-08T16:50:32+00:00","og_image":[{"width":1536,"height":1024,"url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/04\/como-dibujar-formas-basicas-con-css.avif","type":"image\/jpeg"}],"author":"marta","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"marta","Tiempo de lectura":"10 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#article","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/"},"author":{"name":"marta","@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"headline":"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas","datePublished":"2026-04-08T14:41:38+00:00","dateModified":"2026-04-08T16:50:32+00:00","mainEntityOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/"},"wordCount":2319,"commentCount":0,"publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/04\/como-dibujar-formas-basicas-con-css.avif","articleSection":["Blog"],"inLanguage":"es","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/","url":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/","name":"C\u00f3mo dibujar formas b\u00e1sicas con CSS","isPartOf":{"@id":"https:\/\/martagonzalez.dev\/wp\/#website"},"primaryImageOfPage":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#primaryimage"},"image":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#primaryimage"},"thumbnailUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/04\/como-dibujar-formas-basicas-con-css.avif","datePublished":"2026-04-08T14:41:38+00:00","dateModified":"2026-04-08T16:50:32+00:00","description":"Aprende c\u00f3mo dibujar con CSS c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas con ejemplos pr\u00e1cticos, interacci\u00f3n y consejos de dise\u00f1o para reducir la carga cognitiva.","breadcrumb":{"@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#primaryimage","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/04\/como-dibujar-formas-basicas-con-css.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2026\/04\/como-dibujar-formas-basicas-con-css.avif","width":1536,"height":1024,"caption":"Representaci\u00f3n visual de c\u00f3mo dibujar formas b\u00e1sicas con CSS aplicada a dise\u00f1o web y creatividad digital."},{"@type":"BreadcrumbList","@id":"https:\/\/martagonzalez.dev\/wp\/blog\/dibujar-formas-basicas-con-css\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/martagonzalez.dev\/wp\/"},{"@type":"ListItem","position":2,"name":"C\u00f3mo dibujar formas b\u00e1sicas con CSS: c\u00edrculos, tri\u00e1ngulos, \u00f3valos y estrellas"}]},{"@type":"WebSite","@id":"https:\/\/martagonzalez.dev\/wp\/#website","url":"https:\/\/martagonzalez.dev\/wp\/","name":"Marta Gonz\u00e1lez","description":"Desarrollo Front-end","publisher":{"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738"},"alternateName":"Marta Gonz\u00e1lez Desarrollo Frontend","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/martagonzalez.dev\/wp\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":["Person","Organization"],"@id":"https:\/\/martagonzalez.dev\/wp\/#\/schema\/person\/3df598b4756cd72fec6126546267c738","name":"marta","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","url":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","contentUrl":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif","width":575,"height":575,"caption":"marta"},"logo":{"@id":"https:\/\/martagonzalez.dev\/wp\/wp-content\/uploads\/2025\/05\/cropped-logo-martagonzalez.avif"},"description":"Me dedico al desarrollo front-end. Tengo estudios de multimedia, administraci\u00f3n de sistemas y desarrollo de aplicaciones inform\u00e1ticas. Trabajo con lenguajes HTML5, CSS3 y JavaScript. Me gustan los retos, soy autodidacta, creativa y proactiva. Aprendo con facilidad y me adapto a nuevos entornos r\u00e1pidamente.","sameAs":["https:\/\/martagonzalez.dev\/wp","https:\/\/www.facebook.com\/profile.php?id=100031998110346","https:\/\/www.instagram.com\/mcgweb","https:\/\/www.linkedin.com\/in\/martacg\/","marta"],"birthDate":"1986-01-07","gender":"mujer","knowsAbout":["HTML5","CSS3","Javascript"],"jobTitle":"Desarrollo Frontend","url":"https:\/\/martagonzalez.dev\/wp\/author\/marta\/","publishingPrinciples":"https:\/\/martagonzalez.dev\/wp\/politica-de-privacidad\/"}]}},"_links":{"self":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/18972","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/comments?post=18972"}],"version-history":[{"count":2,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/18972\/revisions"}],"predecessor-version":[{"id":18986,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/posts\/18972\/revisions\/18986"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media\/18977"}],"wp:attachment":[{"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/media?parent=18972"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/categories?post=18972"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/martagonzalez.dev\/wp\/wp-json\/wp\/v2\/tags?post=18972"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}