DesarrolloLibre

Desarrollo Web, Android y mucho más

19-12-2016

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
Ayúdanos a seguir creciendo

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Sistema sola con CSS

Sistema sola con CSS

Multiple.js para fundir nuestros fondos en HTML

Multiple.js para fundir nuestros fondos en HTML

Calendario de cubo

Calendario de cubo

Algunos artículos que te pueden interesar

El uso de la función step en las animaciones y transiciones en CSS

El uso de la función step en las animaciones y transiciones en CSS

La función steps() permite controlar el movimiento de las animaciones indicando el número de "frame" o saltos que queremos que conste una animación o transición.

Andrés Cruz 16-03-2015

Efectos hovers sobre imágenes con CSS

Efectos hovers sobre imágenes con CSS

En esta entrada veremos cómo crear un simple efecto hover con CSS sobre una imagen; para esto se coloca una imagen como fondo en un contenedor y colocar múltiples cuadros consecutivos (divs) de una fracción del tamaño del fondo.

Andrés Cruz 17-03-2016

Triángulo con fondo animado con CSS

Triángulo con fondo animado con CSS

Se explica cómo crear un triángulo con un fondo animado con un poco de CSS, HTML vectorial y una imagen.

Andrés Cruz 19-12-2016