[scss]毎回面倒な吹き出しをmixin化

なんでもっと早くやらなかったのか不思議で仕方ない。
毎回普通にcss書いてたので、流石にめんどくさくてmixin作りました。
単色の吹き出しに使えます。

[css]
// mixin
@mixin balloon-arrow($direction, $duration, $color) {
position: absolute;
content: “”;
display: block;
width: 0;
height: 0;
border-style: solid;
@if $direction == top {
top: -$duration;
left: 50%;
margin-left: -$duration;
border-width: 0 $duration $duration $duration;
border-color: transparent transparent $color transparent;
}
@if $direction == right {
right: -$duration;
top: 50%;
margin-top: -$duration;
border-width: $duration 0 $duration $duration;
border-color: transparent transparent transparent $color;
}
@if $direction == bottom {
bottom: -$duration;
left: 50%;
margin-left: -$duration;
border-width: $duration $duration 0 $duration;
border-color: $color transparent transparent transparent;
}
@if $direction == left {
left: -$duration;
top: 50%;
margin-top: -$duration;
border-width: $duration $duration $duration 0 ;
border-color: transparent $color transparent transparent;
}
}
[/css]
引数はそれぞれ
$direction 吹き出しの方向、top, right, bottom, leftで指定 bottomだったらボックスの下にくっつく
$duration 吹き出しの大きさ pxで指定
$color 吹き出しの色 hexでもrgbでもrgbaでもok

[css]
// scss
.balloon {
background: #000;
border-radius: 20px;
position: relative;

&:after {
@include balloon-arrow(bottom, 20px, #000);
}
}
[/css]

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください