Softonic

Générateur de diviseur CSS

Étape 1 / 2 CSS
Contenu au-dessus
Contenu en dessous
Suivant

Les séparateurs de section sont les lignes horizontales qui délimitent les blocs d’une page d’atterrissage, comme la ligne discrète entre deux sections ou celle qui clôt un tableau de prix. Ce générateur construit un simple séparateur horizontal : choisissez un style de ligne (plein, pointillé, en tirets, double ou rainuré), définissez la couleur, l’épaisseur et la marge, prévisualisez-le entre deux sections d’exemple et copiez le CSS obtenu.

Comment créer un séparateur

  1. 1

    Choisissez le style de ligne

    Choisissez parmi plein, en tirets, pointillé, double ou rainuré, le style `border-top` utilisé pour le séparateur.

  2. 2

    Choisissez la couleur

    Accordez la ligne aux fonds de vos sections ou à la couleur de votre marque.

  3. 3

    Réglez épaisseur et marge

    L'épaisseur va de 1 à 20 pixels ; la marge contrôle l'espace vertical au-dessus et au-dessous de la ligne.

  4. 4

    Prévisualisez entre sections

    Le séparateur est affiché entre deux sections d'exemple pour vérifier l'alignement et les espacements.

  5. 5

    Copiez le CSS

    Copiez la règle `.divider` prête et collez-la dans votre feuille de style.

Diviseurs de ligne simples

/* Règle horizontale subtile */
.divider {
  height: 1px;
  background: #e5e7eb;
  border: 0;
  margin: 3rem 0;
}

/* Avec texte au milieu */
.divider-text {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: #6b7280;
}
.divider-text::before,
.divider-text::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

Transition de section angulaire

Le truc du clip-path :

.hero {
  background: #0f172a;
  color: white;
  padding: 4rem 1rem;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 48px));
}

Le coin inférieur gauche est tiré vers le haut de 48px, créant une pente diagonale. Pour une transition propre, la section suivante doit commencer à ras de la pente, pas d’écart blanc.

Pour une diagonale allant dans l’autre sens, échangez quel coin inférieur est levé. Pour une entaille ou un zigzag, ajoutez plus de sommets.

Diviseurs de vagues SVG

SVG est la manière la plus propre de faire des courbes organiques :

<div class="hero">…</div>
<svg class="wave" viewBox="0 0 1440 80" preserveAspectRatio="none">
  <path d="M0 80 C 360 0, 1080 0, 1440 80 L 1440 80 L 0 80 Z"
        fill="white"/>
</svg>

.wave {
  display: block;
  width: 100%;
  height: 60px;
  margin-top: -1px; /* fermez tout écart de sous-pixel */
}

preserveAspectRatio="none" permet au SVG de s’étirer à la largeur du conteneur indépendamment des dimensions source. margin-top: -1px comble le mince interstice que certains moteurs de rendu laissent.

Bibliothèque de diviseurs courants

Extraits utiles :

Motif Style
Ligne en tirets border-top: 1px dashed currentColor
Ligne en pointillés border-top: 2px dotted currentColor; opacity: .4
Ligne dégradée background: linear-gradient(to right, transparent, #999, transparent)
Ornemental Ligne + ornement SVG centré avec ::before/::after
Pente angulaire clip-path: polygon(...) sur la section au-dessus
Vague SVG avec un chemin de Bezier cubique
Vague inversée SVG avec des sommets montant dans la section
Zigzag SVG avec des points alternés

Conseils

  • Correspondance des coutures. L’arrière-plan du diviseur (remplissage SVG ou couleur de section angulaire) doit correspondre exactement à l’arrière-plan de la section suivante. Une nuance décalée de 1px ruine l’effet.
  • Évitez les courbes lourdes sur les écrans étroits. Une vague qui semble élégante à 1440px peut sembler écrasée à 360px. Utilisez une amplitude plus petite sur mobile via des requêtes média, ou un chemin SVG différent.
  • Ne superposez pas plusieurs diviseurs. Une couture par frontière de section suffit.
  • Performance. Les diviseurs SVG en ligne sont négligeables ; les diviseurs basés sur des images coûtent une requête réseau. Les SVG en ligne gagnent.

Questions fréquentes

SVG. CSS peut faire des clips angulaires droits proprement, mais les courbes nécessitent des approximations avec de nombreux sommets polygonaux ou des solutions de contournement. Les chemins SVG gèrent les courbes lisses nativement et s’adaptent à n’importe quelle largeur.

Arrondi de sous-pixel. Ajoutez margin-top: -1px (ou -2px dans certains navigateurs) à la vague, ou utilisez display: block pour éviter l’espace des éléments en ligne. Les deux astuces ferment la couture de manière fiable.

Oui, visuellement. Mais si la section au-dessus est interactive (un bouton dans le coin inférieur), le clip-path angulaire supprime le contenu visible de cette région tout en gardant la cible de frappe, ce qui peut surprendre les utilisateurs. Laissez de l’espace à l’intérieur de la section angulaire pour que les éléments interactifs restent éloignés du bord coupé.

Non. Les diviseurs sont purement décoratifs et n’affectent pas le contenu de la page, qui est ce que les moteurs de recherche indexent. La structure sémantique (titres, sections) est importante pour le SEO ; le séparateur décoratif entre eux ne l’est pas.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Générateur de carte CSS

Créez le CSS d’un conteneur de carte : fond, bordure, rayon des angles, espacement intérieur et ombre douce, avec aperçu immédiat et code à copier-coller.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Recherche de nom de couleur

Trouvez la couleur nommée CSS standardisée la plus proche d’une valeur HEX, RGB ou HSL grâce à l’écart CIEDE2000.

Outil disponible dans d’autres langues