Separator

Options

Classe Description
<div data-separator='separator' data-colors='topColor, bottomColor'></div> Ajouter un séparateur.
.flip
.flipX
.flipY
Inverser le séparateur

Pour créer un nouveau séparateur :

  • Le svg doit avoir une viewbox de "0 0 102 12". Seule la zone centrée de 100x10 sera affichée. Cela permet d'éviter des espaces indésirable.
  • Les éléments haut doivent avoir la classe .separatorTop
  • Les éléments bas doivent avoir la classe .separatorBottom

Exemples

Exemples

Section 01

Section 02

Section 03

Section 04

Section 05

Section 06

<div class="section white" style="background-image: linear-gradient(to right bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);">
    <div class="" data-separator="triangle" data-colors="light, transparent"></div>
    <div class="containerXL paddingXXL">
        <p class="p1 center">Section 01</p>
    </div>
    <div class="" data-separator="triangle" data-colors="transparent, red"></div>
</div>
<div class="section bgRed white">
    <div class="containerXL paddingXXL">
        <p class="p1 center">Section 02</p>
    </div>
</div>
<div class="section bgRed" style="background-image: linear-gradient(to right bottom, #051937, #004d7a, #008793, #00bf72, #a8eb12);">
    <div class="" data-separator="triangle" data-colors="red, transparent"></div>
    <div class="containerXL paddingXXL">
        <p class="p1 center">Section 03</p>
    </div>
    <div class="" data-separator="triangle" data-colors="transparent, light"></div>
</div>
<div class="section">
    <div class="containerXL paddingXXL">
        <p class="p1 center">Section 04</p>
    </div>
</div>
<div class="section imgParallax"  style="background-image: url('/web/images/wallpapers/02.jpg');">
    <div class="" data-separator="triangle" data-colors="light, transparent"></div>
    <div class="containerXL height50 paddingXXL">
        <p class="p1 center white positionCenter">Section 05</p>
    </div>
    <div class="" data-separator="triangle" data-colors="transparent, blue"></div>
</div>
<div class="section bgBlue white">
    <div class="containerXL paddingXXL">
        <p class="p1 center">Section 06</p>
    </div>
</div>