cssarrowplease.scss

@mixin pointer($background, $borderwidth, $bordercolor, $arrowsize, $arrowposition) {
	background: $background;
	border: $borderwidth solid $bordercolor;
	&:after, &:before {
		@if $arrowposition == 'top' {
			bottom: 100%;
			left: 50%;
		}
		@if $arrowposition == 'bottom' {
			top: 100%;
			left: 50%;
		}
		@if $arrowposition == 'left' {
			right: 100%;
			top: 50%;
		}
		@if $arrowposition == 'right' {
			left: 100%;
			top: 50%;
		}
		border: solid transparent;
		content: " ";
		height: 0;
		width: 0;
		position: absolute;
		pointer-events: none;
	}

	&:after {
		border-color: rgba(255, 255, 255, 0);
		@if $arrowposition == 'top' {
			border-bottom-color: $background;
			margin-left: -$arrowsize;
		}
		@if $arrowposition == 'bottom' {
			border-top-color: $background;
			margin-left: -$arrowsize;
		}
		@if $arrowposition == 'left' {
			border-right-color: $background;
			margin-top: -$arrowsize;
		}
		@if $arrowposition == 'right' {
			border-left-color: $background;
			margin-top: -$arrowsize;
		}
		border-width: $borderwidth;
	}
	&:before {
		border-color: rgba(0, 0, 0, 0);
		@if $arrowposition == 'top' {
			border-bottom-color: $bordercolor;
			margin-left: -$borderwidth - $arrowsize;
		}
		@if $arrowposition == 'bottom' {
			border-top-color: $bordercolor;
			margin-left: -$borderwidth - $arrowsize;
		}
		@if $arrowposition == 'left' {
			border-right-color: $bordercolor;
			margin-top: -$borderwidth - $arrowsize;
		}
		@if $arrowposition == 'right' {
			border-left-color: $bordercolor;
			margin-top: -$borderwidth - $arrowsize;
		}
		border-width: $borderwidth + $arrowsize;
	}
}