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

0 commentaire

Laisser un commentaire

Avatar placeholder

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