Cuando nos sentamos frente a un proyecto y nos ponemos manos a la obra siempre intentamos darle ese punto de originalidad, que en la mayoría de los casos se queda en un simple intento. Sí, puede que nos quede bonito y que todo este correcto, pero al final es igual que el resto de webs, eso sí, según las nuevas tendencias (ahora se vuelve a llevar lo minimalista, y me confieso, también he cometido ese pecado).

Pero lo cierto es que la red está llena de buenas y originales ideas, como este diseño de WEbSpaceInvader, donde crea un layout tremendamente original, con la técnica angled edges o bordes asimétricos. Sin embargo, su técnica está lejos de mi alcance, el uso del pseudoelemento :nth-child y algo de jquery (aunque sólo para las imágenes) la hace, a mi gusto, un tanto rebuscada. Sin embargo hay una forma más sencilla de conseguir este efecto, con pseudoelementos :before o :after y el elemento transform. Así que arremángate, que comenzamos.

Lo primero de todo es dejar claro nuestro objetivo, vamos a dibujar una caja (div) con un borde asimétrico. Algo sencillito y que quedaría de esta forma:

Esta es nuestra meta, y lo mejor para llegar a ella es despiezar la caja para ver de que se compone. Realmente es muy sencillo, se trata de superponer dos cajas, una construida de la forma habitual y otra con la propiedad transform sobre el eje Y. Vamos a verlo de forma gráfica, que así nos será más sencillo:

#caja1 {
  height: 8em;
  width: 100%;
}

#caja2 {
  height: 8em;
  margin-bottom: 3em;
  transform: skewY(-3deg);
  transform-origin: 100%;
  width: 100%;
}

Una vez formadas nuestras cajas sólo nos queda superponerlas, hay varias formas de hacerlo, pero por su sencillez y para evitar que en algún punto se nos desmonte el invento, yo voy a usar los pseudoelementos :before y :after. Así, y de esta forma, nos quedaría el código de nuestro objetivo:

#borde-asimetrico {
  height: 8em;
  position: relative;
  width: 100%;
}

#borde-asimetrico:after {
  background: inherit;
  bottom: 0;
  content: '';
  height: 100%;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-3deg);
  transform-origin: 100%;
  width: 100%;
  z-index: -1;
}

Como ves es una técnica relativamente sencilla, aunque aún así me voy a tomar la licencia para apuntarte un par de cosillas:

• El elemento transform-origin especifica las coordenadas del elemento que vamos a transformar. En nuestro caso 100%, que realmente es 100% 0, que es lo mismo que top right, en fín, arriba a la derecha, desde ese punto es desde donde vamos a relizar la transformación.
• El elemento transform nos transforma la caja en un ángulo de 3 grados negativos sobre el eje Y, concretamente desde el punto que marcamos con el elemento transform-origin.

Para terminar sólo un apunte más. Hay que tener especial cuidado con los márgenes cuando apliquemos este técnica, ya que la segunda caja creada a partir del pseudoelemento :after, al estar posicionada de forma absoluta, se sale de la primera caja y puede solaparse con algún otro elemento, uno de los problemas más comunes cuando usamos posicionamientos absolutos.

Ahora que ya conoces la técnica a fondo sólo tienes que usarla con cabeza y mucha imaginación, para intentar dar ese toque original a cualquier cosa que diseñes, que ahí es na.