なんでもっと早くやらなかったのか不思議で仕方ない。
毎回普通にcss書いてたので、流石にめんどくさくてmixin作りました。
単色の吹き出しに使えます。
// 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;
}
}
引数はそれぞれ
$direction 吹き出しの方向、top, right, bottom, leftで指定 bottomだったらボックスの下にくっつく
$duration 吹き出しの大きさ pxで指定
$color 吹き出しの色 hexでもrgbでもrgbaでもok
// scss
.balloon {
background: #000;
border-radius: 20px;
position: relative;
&:after {
@include balloon-arrow(bottom, 20px, #000);
}
}