Créer des séparations entre sections avec des images circulaires

Comment créer une transition entre différentes sections de la page ?

Dans l’exemple qui va suivre, j’applique le code sur un site wordpress, en utilisant notamment le plugin ACF. Mais le code vaut évidemment pour tout type de site, il s’agit ici avant tout de css.

Le principe est de créer une séparation entre deux sections d’une même page, en incluant une image circulaire centrée au milieu, comme ceci :

Il y a différente manière de faire, notamment avec des pseudo élements. Ici on va faire simple

Voici le code html de base, incluant l’appel au custom field d’ACF

<section class="container-flag">
    <?php 
    $categflag = get_field('categflag',$post_id);
    if( !empty($categflag) ): ?>
    <div class="rounded-image">
      <div class="imgShape" style="background-image: url('<?php echo $categflag["url"]; ?>');">
      </div>
   </div>
  <?php endif; ?>
</section>

je crée une div globale englobante, ici <section class= »container flag »>. Celle-ci sera mon trait horizontal faisant toute la largeur de la page

.container-flag{
	width: 100%;
    height: 4px;
    background-color: #fff;
    position: relative;
}

la div . rounded-image sera mon cercle du milieu qui va accueillir l’image

.rounded-image{
	
	width: 100px;
    height: 100px;
    background-color: transparent;
    border: solid 4px #fff;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    overflow: hidden;
}

Enfin, la div imgShape contient mon image en arrière-plan : Je lui donne une taille et je règle son positionnement au cas où l’image serait décentrée.

.imgShape{
   width: 100px;
    height: 100px;
    background-position: 121px -3px;
}