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 :
|
|
<div class="boite"> <h2>Lorem ipsum</h2> <p>dolor sit amet ...</p> </div> |
Dans votre code SASS (en utilisant les paramètres par défaut) :
|
|
.boite{ width: 180px; margin: 20px; padding: 20px; @include make-arrow(); } |
Dans votre code SASS (en surchargeant les paramètres par défaut) :
|
|
.boite{ width: 180px; margin: 20px; padding: 20px; @include make-arrow( $box-border-width: 2px, $box-border-style: dashed, $box-border-color: red, $box-background-color: #eee, $arrow-position: bottom, $arrow-size: 30px); } |
Code source du mixin en version SASS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 |
// Arrow mixin @mixin make-arrow( $box-border-width: 1px, $box-border-style: solid, $box-border-color: #000, $box-background-color: #fff, $arrow-position: top, $arrow-size: 20px) { $side-width: $arrow-size + $box-border-width + ($box-border-width / 3); $arrow-calc: ($arrow-size / 2) + $box-border-width; position: relative; border-width: $box-border-width; border-style: $box-border-style; border-color: $box-border-color; background-color: $box-background-color; &::after{ position: absolute; z-index: 1; content: ""; width: $arrow-size; height: $arrow-size; background-color: $box-background-color; border-width: 0; border-style: $box-border-style; border-color: $box-border-color; border-bottom: none 0; border-left: none 0; #{$arrow-position}: -($side-width / 2) - ($box-border-width / 2); } @if $arrow-position == top { &::after{ left: calc(50% - #{$arrow-calc}); border-width: $box-border-width; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } @if $arrow-position == right { &::after{ top: calc(50% - #{$arrow-calc}); border-width: $box-border-width; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } } @if $arrow-position == bottom { &::after{ left: calc(50% - #{$arrow-calc}); border-width: $box-border-width; -webkit-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } } @if $arrow-position == left { &::after{ top: calc(50% - #{$arrow-calc}); border-width: $box-border-width; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } } } |
Code source du mixin en version LESS :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
// Arrow mixin // http://devfrontend.info/sass-less-mixin-generer-des-chevrons-pour-une-boite-type-info-bulle/ .make-arrow( @box-border-width: 1px, @box-border-style: solid, @box-border-color: #000, @box-background-color: #fff, @arrow-position: top, @arrow-size: 20px) { @side-width: @arrow-size + @box-border-width + (@box-border-width / 3); @arrow-calc: (@arrow-size / 2) + @box-border-width; //position: relative; //rajouter à la main (si besoin) dans la feuille LESS au moment de déclarer le mixin border-width: @box-border-width; border-style: @box-border-style; border-color: @box-border-color; background-color: @box-background-color; &::after{ position: absolute; z-index: 1; content: ""; width: @arrow-size; height: @arrow-size; background-color: @box-background-color; border-width: 0; border-style: @box-border-style; border-color: @box-border-color; border-bottom: none 0; border-left: none 0; @{arrow-position}: -(@side-width / 2) - (@box-border-width / 2); } &::after when (@arrow-position = top) { left: calc(~"50% - " @arrow-calc); border-width: @box-border-width; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } &::after when (@arrow-position = right) { top: calc(~"50% - " @arrow-calc); border-width: @box-border-width; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } &::after when (@arrow-position = bottom) { left: calc(~"50% - " @arrow-calc); border-width: @box-border-width; -webkit-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } &::after when (@arrow-position = left) { top: calc(~"50% - " @arrow-calc); border-width: @box-border-width; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } } |
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)
|
|
.box{ @include make-arrow( $box-border-width: 1px, $arrow-position: right, $arrow-size: 12px, $arrow-background-color: #fff, $arrow-border-width: 1px, $arrow-border-color: tomato); } |
Source mixin :
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
// Arrow mixin @mixin make-arrow( $box-border-width: 1px, $arrow-position: top, $arrow-size: 20px, $arrow-background-color: #fff, $arrow-border-width: 1px, $arrow-border-color: #000) { $side-width: $arrow-size; $arrow-calc: ($arrow-size / 2); position: relative; border-width: $box-border-width; &::after{ position: absolute; z-index: 1; content: ""; width: $arrow-size; height: $arrow-size; background: $arrow-background-color; border-width: 0; border-style: solid; border-color: $arrow-border-color; border-bottom: none 0; border-left: none 0; #{$arrow-position}: -($side-width / 2) - ($box-border-width / 2); } @if $arrow-position == top { &::after{ left: calc(50% - #{$arrow-calc}); border-width: $arrow-border-width; -webkit-transform: rotate(-45deg); -ms-transform: rotate(-45deg); transform: rotate(-45deg); } } @if $arrow-position == right { &::after{ top: calc(50% - #{$arrow-calc}); border-width: $arrow-border-width; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); } } @if $arrow-position == bottom { &::after{ left: calc(50% - #{$arrow-calc}); border-width: $arrow-border-width; -webkit-transform: rotate(-225deg); -ms-transform: rotate(-225deg); transform: rotate(-225deg); } } @if $arrow-position == left { &::after{ top: calc(50% - #{$arrow-calc}); border-width: $arrow-border-width; -webkit-transform: rotate(-135deg); -ms-transform: rotate(-135deg); transform: rotate(-135deg); } } } |
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 :
|
|
.ma-classe { @include arrow-box(arrow position,arrow size,box background color,box border width,box border color); } |
Quatre valeurs possibles pour le paramètre arrow position : top|right|bottom|left. Exemple :
|
|
.ma-classe { @include arrow-box(right,30px,#88b7d5,4px,#c2e1f5); } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 |
/* http://cssarrowplease.com/ */ @mixin arrow-box( $arrow-position: bottom, $arrow-size: 20px, $box-background-color: #fff, $box-border-width: 1px, $box-border-color: #000) { position: relative; background: $box-background-color; border: $box-border-width solid $box-border-color; &:after, &:before { border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; } &:after { border-color: rgba(255, 255, 255, 0); border-width: $arrow-size; } &:before { border-color: rgba(0, 0, 0, 0); border-width: ($arrow-size + ($box-border-width * 1.41421356)); } @if $arrow-position == top { &:after, &:before { bottom: 100%; left: 50%; } &:after { border-bottom-color: $box-background-color; margin-left: (-$arrow-size); } &:before { border-bottom-color: $box-border-color; margin-left: (-$arrow-size - ($box-border-width * 1.41421356)); } } @if $arrow-position == right { &:after, &:before { left: 100%; top: 50%; } &:after { border-left-color: $box-background-color; margin-top: (-$arrow-size); } &:before { border-left-color: $box-border-color; margin-top: (-$arrow-size - ($box-border-width * 1.41421356)); } } @if $arrow-position == bottom { &:after, &:before { top: 100%; left: 50%; } &:after { border-top-color: $box-background-color; margin-left: (-$arrow-size); } &:before { border-top-color: $box-border-color; margin-left: (-$arrow-size - ($box-border-width * 1.41421356)); } } @if $arrow-position == left { &:after, &:before { right: 100%; top: 50%; } &:after { border-right-color: $box-background-color; margin-top: (-$arrow-size); } &:before { border-right-color: $box-border-color; margin-top: (-$arrow-size - ($box-border-width * 1.41421356)); } } } |