Formas cuadradas

09-11-2019

Las ilustraciones que encontrarás en este site todas están hechas con formas geométricas, si aún no estás familiarizada con CSS, este post te ayudará a crear las formas que más utilizo. Si no quieres crear los ficheros CSS y HTML puedes utilizar webs como Codepen o jsfiddle que permiten escribir el código en el navegador y ver los mientras lo estás construyendo.

Cuadrado y sus variantes

Vamos a empezar por la forma más básica, el cuadrado y sus variantes (rectángulo, rombo y paralelogramo).

Cuadrado

Para crear un cuadrado sólo necesitamos tener un div al que le daremos como nombre de clase square. Las propiedades mínimas que debe tener este div son height y width con valores iguales, para darle color y que lo veamos le añadiremos background , border o ambas tú decides.

<div class="square">
</div>

.square{
    width: 275px;
    height: 275px;
    background: #62DCF2;
}

Rectángulo

Una vez tenemos el cuadrado crear un rectángulo es muy fácil cámbiale el alto o ancho ¡Ya lo tienes!

<div class="rectangle">
</div>

.rectangle {
  width: 350px;
  height: 225px;
  background: #0AB7D6;
}

Rombo

Volvemos a las medidas del cuadrado y aplicaremos la propiedad transform y su valor rotate() esto hará que el elemento rote sobre su eje los grados que le indiquemos, en este caso 45.

<div class="rhomb">
</div>

.rhomb {
  width: 120px;
  height: 120px;
  background: #1DCDED;
  transform: rotate(45deg);
}

transform-origin:

Esta propiedad permite cambiar la posición del elemento transformado.
.rhomb {
  width: 120px;
  height: 120px;
  background: #1DCDED;
  transform: rotate(45deg);
  transform-origin: 100% 50%;
}

Paralelogramo

Para crear un paralelogramo partimos de la base del rectángulo y jugaremos con la propiedad transform pero esta vez con su valor skew que transforma la inclinación de los ejes. Con un valor aplica a ambos ejes, si añadimos dos valores afectara a x e y en este orden.

<div class="parallelogram">
</div>

.parallelogram {
  width: 350px;
  height: 225px;
  background: #117B9B;
  transform: skew(-30deg);
}

Juega

Ahora que tenemos las primeras formas geométricas, juega con estos objetos para ir familiarizándote con las propiedades de CSS. Te dejo el enlace a Codepen donde puedes ver el código.

Etiquetas