Tagarrow

[SASS] [LESS] [Mixin] Générer des chevrons pour une boite type info-bulle

sass_css-arrow

Update du 24/05/2016:

  • correction d’un bug de décalage plus ou moins important du chevron par rapport à la bordure,
  • impact optimisé des variables sur le résultat

Simulation JSFiddle : un mixin SASS pour générer des boites de type info-bulle.

Les paramètres disponibles :

  • $box-border-width : épaisseur de la bordure de la boîte (en px). Valeur par défaut: 1px.
  • $box-border-style : aspect de la bordure de la boîte (avec les paramètres none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset|initial|inherit). Valeur par défaut: solid.
  • $box-border-color : couleur de la bordure de la boîte. Valeur par défaut: #000.
  • $box-background-color : couleur de fond de la boîte. Valeur par défaut: #fff.
  • $arrow-position : position du chevron par rapport à la boite (avec les paramètres top|right|bottom|left). Valeur par défaut: top.
  • $arrow-size : largeur d’un côté du chevron (en px). Valeur par défaut: 20px.

Attention : veuillez notre que ce mixin fonctionne uniquement pour des chevrons de forme isocèle (dont les deux côtés qui forment un angle droit ont la même longueur).

Exemple d’utilisation :

Dans votre code HTML :

Dans votre code SASS (en utilisant les paramètres par défaut) :

Dans votre code SASS (en surchargeant les paramètres par défaut) :

Code source du mixin en version SASS :

Code source du mixin en version LESS :


ATTENTION: à partir d’ici, versions dépréciées !!!

Nouveau mixin :

Mise à jour : l’ancien mixin affichait des chevrons crénelés suivant le navigateur (Firefox notamment). Le composant à donc été entièrement repensé

Nouvelle source : JSFiddle.net : [SASS][Mixin] Générer des chevrons pour une boite type info-bulle.

Un grand Merci à Jean-Luc pour son support précieux 😉

Utilisation (paramètres) :

  • $box-border-width : épaisseur de la bordure de la boite (en px)
  • $arrow-position : position du chevron par rapport à la boite (top | right | bottom | left)
  • $arrow-size : largeur d’un côté du chevron (en px). Attention : ce mixin ne fonctionne que pour des chevrons isocèles (dont les deux côtés qui forment un angle droit ont la même longueur)
  • $arrow-background-color : couleur de fond du chevron (normalement, la même valeur que celle de la couleur de fond de votre boite)
  • $arrow-border-width : épaisseur de la bordure du chevron (normalement, la même valeur que celle de la bordure de votre boite)
  • $arrow-border-color : couleur de la bordure du chevron (normalement, la même valeur que celle de la couleur de la bordure de votre boite)

Source mixin :

Ancien mixin :

Mixin SASS inspiré de ce générateur en ligne : http://cssarrowplease.com/. Simulation sur jsfiddle.net : http://jsfiddle.net/frontenddeveloper/4p2fhgce/22/.

Utilisation :

Quatre valeurs possibles pour le paramètre arrow position : top|right|bottom|left. Exemple :

[CSS] Créer des boutons avec des flèches en CSS3 sans markup supplémentaire avec la propriété border et la pseudo-classe :after

Générateur de flèches en CSS3.
Simulation : http://jsfiddle.net/frontenddeveloper/caocL8dp/8/, mixin SASS.

css_arrows

© 2020 devfrontend.info

Theme by Anders NorénUp ↑