La función path()

La función path() es muy útil para definir trayectos desde CSS. Se basa en los trayectos SVG, pero utilizándolos desde una función de CSS. Con la función path() se puede declarar en un el trayecto o ruta que normalmente se declara en una imagen SVG mediante el atributo d de una etiqueta <path>.

De esta forma puedes definir trayectos con líneas o curvas, más complejas (o imposibles) de hacer con HTML. Si no los conoces, echa un vistazo a los trayectos SVG mediante <path>.

¿Qué son los trayectos path()?

Los trayectos SVG son un conjunto de puntos que se conectan entre sí mediante líneas o curvas. Estos trayectos pueden ser dibujados con el elemento <path>.

Por ejemplo, observa este sencillo fragmento. Céntrate en la parte donde definimos el trayecto <path>, concretamente el atributo d:

<svg width="200" height="200" viewBox="0 0 200 200">
  <path
    fill="none" stroke="#000" stroke-width="2"
    d="M0,0 L200,0 L200,200 L0,0 Z" />
</svg>

• Con viewBox definimos el lienzo: 200x200.
• M0,0 mueve (M) el punto inicial arriba a la izquierda.
• L200,0 línea (L) hasta el punto arriba a la derecha.
• L200,200 línea (L) hasta el punto abajo a la derecha.
• L0,0 línea (L) hasta el punto arriba a la izquierda.

Como puedes ver, el trayecto dibuja un triángulo.

Usando trayectos con path()

Vamos ahora a hacer algo parecido con CSS. Utilizaremos la función path(), que nos permite indicar trayectos SVG como el utilizado en el <path> anterior. La sintaxis es la misma, sólo que la indicamos en la función path():

Vamos a hacer un ejemplo, donde utilizaremos la propiedad clip-path, la cuál recorta el contenido indicado:

.box {
  width: 200px;
  height: 200px;
  background: indigo;

  &:hover {
    clip-path: path("M0,0 L200,0 L200,200 L0,0 Z");
  }
}

<div class="box"></div>

Observa que la hemos definido en el :hover, por lo que sólo se recortará cuando pases el ratón por encima del rectángulo.

Usando path() con offset-path

Ahora que entendemos como funciona, observa este nuevo fragmento de código, donde vamos a utilizar la función path() en la propiedad offset-path para definir el trayecto triangular anterior:

body {
  min-height: 225px;
}

.container {
  width: 200px;
  height: 200px;
  background: grey;
}

.box {
  width: 50px;
  height: 50px;
  background: indigo;
  offset-path: path("M0,0 L200,0 L200,200 L0,0 Z");
  animation: move 2s alternate infinite;
}

@keyframes move {
  0% { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}

<div class="container">
  <div class="box"></div>
</div>

Puedes comprobar este trayecto con un editor SVG o con este editor online llamado SVG Path Editor.