Triángulo con fondo animado con CSS

En esta entrada veremos cómo crear un triángulo con un fondo animado, en realidad es bastante obvio y sencillo el experimento y queda bastante bien el efecto a obtener; en general solo necesitamos un poco de CSS, HTML vectorial y una imagen.

Primero dibujaremos un triángulo vectorizado con HTML con las etiquetas path svg:

<svg width='0' height='0'>
  <defs>
	<clipPath id="cp" clipPathUnits="objectBoundingBox">
	  <path d="M0.500, 0.945 L0.994, 0.090 L0.006, 0.090 L0.500, 0.945 L0.500, 0.650 L0.262, 0.238 L0.738, 0.237 L0.500, 0.650z"></path>
	</clipPath>
  </defs>
</svg>

Hace exactamente 140 entradas hablamos sobre la propiedad clip-pathLa propiedad clip-path en CSS para seleccionar regiones a mostrar en elementos y presentamos los diversos valores que se le pueden establecer; círculos, elipses, cuadrados, polígonos etc; con la propiedad clip-path desde el CSS; definir los path desde el HTML tambien es posible y para eso se emplea la etiqueta <path> con nodos los cuales construyen la figura que queramos (más información en: clip-pathPaths).

Ahora indicamos la etiqueta en donde renderizamos el path anterior:

<div class="triangle"></div>

Y con el siguiente CSS queda completado el experimento:

    .triangle {
       clip-path: url(#cp);
      width: 300px;
      height: 300px;
      background-size: cover;
      background-blend-mode: screen;
      position: absolute;
      top: 50%;
      left: 50%;
      background-color: #333;
      background-image: url("fondo.gif");
      -webkit-transform: translateX(-65%) translateY(-50%) rotate(60deg);
                      transform: translateX(-65%) translateY(-50%) rotate(60deg);
    }

Con la propiedad clip-path referenciamos el identificador de la etiqueta que contiene clip-path, es decir, el triangulo.

Con este último CSS rotamos el triángulo y lo giramos en una posición fija e incluimos el fondo, que como puedes darte cuenta es un gif, lo que quiere decir que es un fondo animado.

El resto del código lo puedes encontrar para su descarga y visualización al inicio y final de esta entrada.

Experimento original