DesarrolloLibre

Desarrollo Web, Android, juegos 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

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader Battlenet

Loader Battlenet

Ondas con SVG y CSS

Ondas con SVG y CSS

Atomo con CSS

Atomo con CSS

Algunos artículos que te pueden interesar

La pseudo-class :empty en CSS

La pseudo-class :empty en CSS

En esta entrada veremos como funciona y cómo usar la poco usada y conocida pseudo-class :empty.

Andrés Cruz 15-12-2014

Cómo emplear la cámara y la galería con Phonegap

Cómo emplear la cámara y la galería con Phonegap

Se explica emplear la cámara de un dispositivo con PhoneGap y además cómo seleccionar una foto o imagen que tengamos en nuestro dispositivo empleando la galería con JavaScript.

Andrés Cruz 24-04-2017

Animando cosas con CSS

Animando cosas con CSS

Muchos cosas se pueden hacer con un poco de CSS y algo de imaginación, en esta entrada veremos algunos experimentos curiosos con animaciones que pueden servir (por ejemplo) como icono para la "Carga de Página" en nuestro site.

Andrés Cruz 22-06-2015