なんでもっと早くやらなかったのか不思議で仕方ない。
毎回普通に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;
}
}
- // 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;
- }
- }
// 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);
}
}
- // scss
- .balloon {
- background: #000;
- border-radius: 20px;
- position: relative;
-
- &:after {
- @include balloon-arrow(bottom, 20px, #000);
- }
- }
// scss
.balloon {
background: #000;
border-radius: 20px;
position: relative;
&:after {
@include balloon-arrow(bottom, 20px, #000);
}
}
