Estoy desarrollando mi primer tema comercial para WordPress y en el diseño se utilizan algunas formas geométricas básicas como elementos decorativos. Podría haberlos insertado mediante imágenes o mediante iconos vectoriales pero he decidido crearloos con CSS. La razón: mismo resultado, mayor rapidez.

En este post he recopilado los snippets CSS para crear formas básicas como cuadrados, círculos y triángulos. Derivadas de estas se pueden construir fácilmente otras formas tales como rombos, trapecios y otros paralelogramos. Espero que te sean útiles.

Cuadrados y rectángulos

Los cuadrados y los rectángulos son las formas geométricas más fáciles de dibujar con CSS. Basta definir un bloque con la altura y anchura del cuadrado o rectángulo y darle un color de fondo o definirle un borde. Por ejemplo:

.cuadrado {
     width: 100px; 
     height: 100px; 
     background: #428bca;
}

Si en lugar de un color de fondo definimos un borde (esto se puede aplicar al resto de formas):

.cuadrado-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
}

Y se puede combinar border y background:

.cuadrado-3 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;
}

Y tan fácil como cambiar las propiedades CSS width y height para obtener un rectángulo:

.rectangulo {
     width: 250px; 
     height: 100px; 
     border: 3px solid #555;
     background: #428bca;
}

El rombo

Si giramos el cuadrado obtendremos una forma de rombo. El giro se consigue gracias a la propiedad transform y la función rotate:

.rombo {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg);
     -moz-transform: rotate(45deg);
     -ms-transform: rotate(45deg);
     -o-transform: rotate(45deg);
     transform: rotate(45deg);
}

La forma anterior no es realmente un rombo, es tan sólo un cuadrado girado. El verdadero rombo se consigue combinando la función rotate y skew en la propiedad transform:

.rombo-2 {
     width: 100px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: rotate(45deg) skew(15deg, 15deg);
     -moz-transform: rotate(45deg) skew(15deg, 15deg);
     -ms-transform: rotate(45deg) skew(15deg, 15deg);
     -o-transform: rotate(45deg) skew(15deg, 15deg);
     transform: rotate(45deg) skew(15deg, 15deg);
}

Paralelogramos

Con la propiedad transform podemos conseguir otros paralelogramos. Por ejemplo:

.paralelogramo {
     width: 150px; 
     height: 100px; 
     border: 3px solid #555; 
     background: #428bca;
     -webkit-transform: skew(20deg);
     -moz-transform: skew(20deg);
     -ms-transform: skew(20deg);
     -o-transform: skew(20deg);
     transform: skew(20deg);
}

Trapecios

.trapecio {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-bottom: 100px solid #428bca;
}
.trapecio-top {
    width: 250px;
    height: 0px;
    border-right: 60px solid transparent;
    border-left: 60px solid transparent;
    border-top: 100px solid #428bca;
}

Triángulos

En CSS podemos definir cada uno de los cuatro bordes de un bloque de forma diferente. Se puede aprovechar esta característica para dibujar formas derivadas del cuadrado, como el triángulo: Por ejemplo, si definimos un borde de una determinada anchura y a los bordes adyacentes le damos la mitad de anchura y un color diferente, obtenemos una forma triangular si al propio contenedor le damos una anchura y altura de cero. Por ejemplo:

.triangulo {
     width: 0; 
     height: 0; 
     border-left: 100px solid #f0ad4e;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent; 
}

Jugando con cada uno de los bordes podemos “girar” el triángulo (este mismo concepto se puede utilizar en el resto de formas basadas en bordes que veremos a continuación):

.triangulo-2 {
     width: 0; 
     height: 0; 
     border-left: 100px solid #f0ad4e;
     border-top: 50px solid transparent;
     border-bottom: 50px solid transparent; 
}

Y también podemos combinar colores:

.triangulo-tricolor {
     width: 0; 
     height: 0; 
     border-left: 100px solid #428bca;
     border-top: 50px solid #f0ad4e;
     border-bottom: 50px solid #d9534f; 
}

Triángulo equilátero

.triangulo-equilatero-bottom-left {
     width: 0;
     height: 0;
     border-right: 50px solid transparent;
     border-top: 50px solid transparent;
     border-left: 50px solid #f0ad4e;
     border-bottom: 50px solid #f0ad4e;
}
.triangulo-equilatero-bottom {
     width: 0;
     height: 0;
     border-right: 100px solid transparent;
     border-top: 100px solid transparent;
     border-left: 100px solid transparent;
     border-bottom: 100px solid #f0ad4e;
}

Círculos y formas redondeadas

Del cuadrado también podemos obtener el círculo y formas redondeadas si aplicamos la propiedad border-radius. Un border-radius igual del 50% en los cuatro bordes del cuadrado dará el círculo:

.circulo {
     width: 100px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}

Oval

Y si podemos tener un círculo, también podemos tener una forma ovalada:

.oval {
     width: 250px;
     height: 100px;
     -moz-border-radius: 50%;
     -webkit-border-radius: 50%;
     border-radius: 50%;
     background: #5cb85c;
}

Combinando distintos valores de border-radius para cada borde obtendremos formas redondeadas diferentes:

.oval-half-red {
     width: 250px;
     height: 100px;
     -moz-border-radius: 0 50% / 0 100%;
     -webkit-border-radius: 0 50% / 0 100%;
     border-radius: 0 50% / 0 100%;
     background: #5cb85c;
     border: 3px solid #555;
}

Huevo

.huevo {
    width: 126px;
    height: 180px;
    background-color: #5cb85c;
    -moz-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    -webkit-border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
}

1/4 de círculo

.cuarto-circulo {
     width: 100px; 
     height: 100px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 0 100% 0 0;
     -webkit-border-radius: 0 100% 0 0;
     border-radius: 0 100% 0 0;
}

Semicírculo

.semi-circulo {
     width: 100px; 
     height: 50px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 100px 100px 0 0;
     -webkit-border-radius: 100px 100px 0 0;
     border-radius: 100px 100px 0 0;
}
.semi-circulo-2 {
     width: 50px; 
     height: 100px; 
     border: 2px solid #555; 
     background: #5cb85c;
     -moz-border-radius: 0 100px 100px 0;
     -webkit-border-radius: 0 100px 100px 0;
     border-radius: 0 100px 100px 0;
}

Pac-Man (ComeCocos)

<pre”>.pac-man { width:0; height:0; border-right: 50px solid transparent; border-top: 50px solid #5cb85c; border-left: 50px solid #5cb85c; border-bottom: 50px solid #5cb85c; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; }

Démosle color:

.color-chart {
     width:0;
     height:0;
     border-right: 50px solid #d9534f;
     border-top: 50px solid #428bca;
     border-left: 50px solid #f0ad4e;
     border-bottom: 50px solid #5cb85c;
     -moz-border-radius: 100%;
     -webkit-border-radius: 100%;
     border-radius: 100%;
}

Y con el negativo de pac-man y unos ligeros ajustes en el grosor de los bordes tendremos un cono:

.cono {
    width: 0px;
    height: 0px;
    border-right: 70px solid transparent;
    border-left: 70px solid transparent;
    border-top: 100px solid #5cb85c;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
}

Más formas

Ribbon

.ribbon {
    width: 0px;
    height: 120px;
    border-left: 50px solid #d9534f;
    border-right: 50px solid #d9534f;
    border-bottom: 35px solid transparent;
}

Luna

.luna {
    width: 100px;
    height: 100px;
    -moz-border-radius: 50%;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    -moz-box-shadow: 30px 10px 0 #d9534f;
    -webkit-box-shadow: 30px 10px 0 #d9534f;
    box-shadow: 30px 10px 0 #d9534f;
}

Todavía más

Las posibilidades para dibujar formas con CSS son prácticamente ilimitadas, mucho más si introducimos los pseudoelementos :before y :after. No voy a cubrir estas opciones en este post pues su objetivo era el de mostrar formas geométricas básicas pero si quieres profundizar más te recomiendo los siguientes enlaces:

  1. Generador de formas CSS en Coveloping
  2. The Shapes of CSS en CSS-Tricks
  • maribel

    Buenisimos, lo único no puedo aplicarlo a lo que yo quiero hacer. Cómo hacer si quiero lograr ésta forma, es decir similar a la de la luna pero el círculo calado mucho más chico?

    • Arley Valencia AV

      Hola Maribel, yo lo conseguí con un pseudoelemento.
      <div></div>
      div {
      background: red;
      border-radius: 50%;
      height: 300px;
      margin: 0 auto;
      overflow: hidden;
      position:relative;
      width: 300px;
      }

      div::before{
      content: '';
      background: white;
      border-radius: 50%;
      height: 100px;
      left: -10%;
      position:absolute;
      top: 33%;
      width: 100px;
      }

  • Nelson Jaimes

    Buen día, gracias por tu aporte !! Una consulta, se puede hacer una ruleta de la fortuna giratoria con css ? algo como esto: http://recursostic.educacion.es/newton/web/aplicacion_juegos_aula/p2/ejemplo_de_utilizacin_del_juego_la_ruleta_de_la_fortuna.html pero en este caso solo me gustaria “dibujar” la ruleta sin todo lo demás. Gracias 🙂

  • timo

    Gracias por el aporte Excelente. Una consulta como puedo introducir contenido dentro de esas etiquetas. ejem dentro del triángulo ?

  • Juan

    Hola que tal como se puede hacer una barra de estado que me diga cuantas consultas estan en proceso por ejemplo 3 de 10

  • Maria

    Hola Juan! Voy a probarlo ahora mismo! Quiero modificar un círculo de una plantilla de wordpress y hacer que sea cuadrado e insertar imagen. Si quiero insertar imagen como background… ¿sería la primera opción de background pero en vez de color metiendo img src de la imagen? Mil gracias!!

    • Si quieres poner imagen como background mejor utilizar la propiedad CSS background junto con la notación funcional url() o directamente la propiedad background-image. Por ejemplo:

      background-image: url("url_de_tu_image.png");

      Utilizar img es insertar la imagen en el documento y es algo totalmente distinto. Puede que te sea útil este otro post sobre imágenes background en diseño responsive.

    • pepe

      obviamente este articulo intenta explicar el crear formas que ahorran un tiempo muy por debajo que el que se necesitaria al enviar imagenes prediseñadas. asi que no es una opcion ni remotamente viable ( en ese caso insertar una imagen directamente con html estatico)

  • Muy genial! Sólo que no funciona con porcentajes =/

    • Hola Evel, y perdona no haber contestado antes. ¿Cuál de los ejemplos no funciona con porcentajes?

    • timo

      ninguno funciona con %

    • Bueno, no sé si todos porque no lo he probado pero muchos si funcionarían con porcentajes. Aunque por razones obvias no en todas las situaciones.

      Por ejemplo, un círculo necesita irremediablemente el mismo alto y el mismo ancho, puede ser en porcentaje, ¿por qué no? Lo único que hay que tener en cuenta que su elemento padre tendría que tener un ancho y altura fija para que podamos saber con que porcentajes la anchura y la altrua de círculo serán iguales.

  • Evelyn Mabell

    Buenos dias, a mi me funcionó perfectamente el paralelogramo en chrome, pero no en el explorer, alguien me podria ayudar como hacerlo para explorer, gracias

    • Hola Evelyn. ¿Qué versión de IE estás utilizando? El ejemplo de paralelogramo del post utiliza la propiedad CSS transform. Esta propiedad sólo es soportada en IE 10 y superiores. En el ejemplo se utiliza también -ms-transform que es específica para IE 9. Por debajo de IE 9 no hay ninguna solución, al menos que yo conozca. De todas formas IE 8 y versiones anteriores no son soportadas ya ni siquiera por el propio Microsoft.

  • Luis

    están super, gracias

  • Remy LeBeau

    Muchas gracias por la información, me re sirvio!