Comment connecter l’arrière-plan d’un article à un autre en créant des formes sur le site Web WordPress? J’ai joint une image de cela

Publié par Jean-Michel le

Désolé je n’ai pas pu l’exprimer clairement. Mais j’ai joint une image pour avoir la vue de ce que je demande. Image ici

Solution n°1 trouvée

Ce ne sont pas des « backgorunds connectés ». Ceci est réalisé en ajoutant un triangle au bas de la section bleue avec une marge inférieure négative, qui peut être une image png ou faite avec css (https://css-tricks.com/examples/ShapesOfCSS/)

Si vous pouvez modifier le fichier de modèle (j’utiliserai l’image que vous avez publiée comme exemple), vous devez modifier le fichier de modèle php et ajouter du style à la feuille de style.

Voici un échantillon rapide.

<div class= »snippet » data-lang= »js » data-hide= »false »>

.blue-section, .grey-section {
  display:block;
  position:relative;
  min-height:200px;
  }

.blue-section {
  background-color:blue;
  }

.grey-section {
    background-color:#888;
  }

.triangle {
  position:absolute;
  bottom:-20px;
  z-index:10;
  left:50%;
   transform: translate(-20px,0);
	width: 0;
	height: 0;
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;

	border-top: 20px solid blue;
}
<div class="blue-section">
  test
  <div class="triangle"></div>

 </div>

<div class="grey-section">

  test
 </div>

Catégories : Wordpress

Jean-Michel

Jean-Michel est en charge de la partie blog du site. Il met en place la stratégie de contenu et répond aux questions fréquentes sur Wordpress.

0 commentaire

Laisser un commentaire

Avatar placeholder

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *