Sélectionner une page

SÉPARATEURS : LIVE DEMO

Sympa pour casser le côté trop carré d’une image, le triangle transparent vers le bas permet de faire une jolie transition entre une image et une section de couleur unie.

Ce tutoriel est inspiré du tutoriel de Geno Quiroz.

Ajoutez le CSS sur votre thème enfant

Copiez le code CSS ci-dessous et collez-le sur le thème enfant de votre installation wordpress :

/*----------------------------------------*/
/*---BIG triangle invisible - Quiroz.co---*/
/*----------------------------------------*/
 
#et-main-area { overflow: hidden;} /* Hides all the items that float over the right margin */
 
.big-triangle:after,.big-triangle:before {
    content:'';
    position:absolute;
    bottom:0;
    width:50%;
    z-index:100;
	border-bottom:100px solid #fff; /* Changez la couleur des bordures et la hauteur ICI */
    -moz-transform:rotate(0.000001deg);
    -webkit-transform:rotate(0.000001deg);
    -o-transform:rotate(0.000001deg);
    -ms-transform:rotate(0.000001deg);
    transform:rotate(0.000001deg);}
 
.big-triangle:before{
    right:50%;
    border-right:1000px solid transparent; /* Passer à 75px pour avoir un petit triangle */
    border-left:1000px solid;}
 
.big-triangle:after{
    left:50%;
    border-left:1000px solid transparent; /* Passer à 75px pour avoir un petit triangle */
    border-right:1000px solid;}

Ajoutez la classe CSS à la section

Direction le Divi Builder de votre page. Sélectionnez ensuite les « paramètres » de votre section, onglet « Avancé » et rentrez la classe CSS suivante :

  • big-triangle

https://divirocket.fr/wp-content/uploads/2017/08/ajout-class-css-big-triangle.jpg

Videz votre cache, actualisez votre page et voici un beau triangle en dessous de votre image !