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

Publicidad

Give me for a beer!

Algunos recursos que te pueden interesar

Loader pino con CSS

Loader pino con CSS

Eye Candy

Eye Candy

Loader espiral con CSS

Loader espiral con CSS

Algunos artículos que te pueden interesar

Truco CSS: Construir flechas en los contenedores HTML

Truco CSS: Construir flechas en los contenedores HTML

En esta entrada explicaremos como crear contenedores con flechas o contenedores con una una bifurcación que le colocamos en el mismo.

Andrés Cruz 04-06-2015

Entendiendo la propiedad perspective (perspectiva) en CSS

Entendiendo la propiedad perspective (perspectiva) en CSS

La propiedad perspective agrega un efecto tridimensional afectando la distancia que hay entre un observador y las figuras en el plano a través de una variación en el eje Z; en otras palabras, permite acercar/alejar figuras en el plano.

Andrés Cruz 05-02-2015

Dibujando nuestro propios SVG en HTML (parte 1)

Dibujando nuestro propios SVG en HTML (parte 1)

Un SVG no es más que un XML que describe como dibujar gráficos vectoriales en dos dimensiones y con HTML se ha hecho posible dibujarlos; en esta entrada veremos cómo dibujar formas básicas SVGs a través del elemento svg, definir estilo y sus atributos.

Andrés Cruz 11-05-2015