Background diagonal con CSS

Background diagonal con CSS / Mariano J. Muzas HTML5, CSS3, PHP, Mysql, bbdd, javascript, JQuery, JQuerymobile, Bootstrap, Material Design, WordPress, Newsletter, Api de Facebook, Api de twitter, PrestaShop.

Background diagonal con CSS

Background diagonal con CSS usando la función repeating-linear-gradient, sin utilizar una imagen.

Pueden ser ‘tintas planas’ o con degradado, este último es más original, por ser poco utilizado.

Tras definir ‘repeating-linear-gradient’ hemos de definir los valores:

La rotación, en este caso 45 grados y menos 45 grados.

	  .diagonal-a{
	    height: 300px;
	    margin-bottom: 18px;
	    background: repeating-linear-gradient(
	      45deg,
	      #95191E 10px,
	      #95191E 20px,
	      #E30F13 30px,
	      #E30F13 40px
	    );
	  }

  .diagonal-b{
    height: 300px;
    margin-bottom: 18px;
    background: repeating-linear-gradient(
      -45deg,
      #95191E 20px,
      #95191E 40px,
      #E30F13 40px,
      #E30F13 60px
    );

Puede ver este ejemplo y descargarlo en este enlace en mi perfil de Codepen.

Mariano J.

Escribe un comentario

Tu email no se hará visible