SASS triangles

triangles.css

ul {
  min-height: 40px;
  margin: 40px 0;
  padding-left: 0;
  background-color: grey;
  list-style: none;
}
ul > li {
  display: inline-block;
  position: relative;
  min-width: 190px;
  line-height: 40px;
  text-align: center;
  text-transform: uppercase;
}
ul .top::after {
  position: absolute;
  top: -10px;
  left: 50%;
  margin-left: -10px;
  z-index: 2;
  width: 0;
  height: 0;
  border-bottom: 10px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: '';
}
ul .right::after {
  position: absolute;
  right: -10px;
  top: 50%;
  margin-top: -10px;
  z-index: 2;
  width: 0;
  height: 0;
  border-left: 10px solid black;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: '';
}
ul .bottom::after {
  position: absolute;
  bottom: -10px;
  left: 50%;
  margin-left: -10px;
  z-index: 2;
  width: 0;
  height: 0;
  border-top: 10px solid black;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  content: '';
}
ul .left::after {
  position: absolute;
  left: -10px;
  top: 50%;
  margin-top: -10px;
  z-index: 2;
  width: 0;
  height: 0;
  border-right: 10px solid black;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
  content: '';
}
ul a {
  display: block;
  color: black;
}

triangles.html

<ul>
  <li class="top"><a href="#">top</a></li>
  <li class="right"><a href="#">right</a></li>
  <li class="bottom"><a href="#">bottom</a></li>
  <li class="left"><a href="#">left</a></li>
</ul>

triangles.scss

// ----
// Sass (v3.4.11)
// Compass (v1.0.3)
// ----

// Positioning stuff
@mixin position($position, $args) {
	position: $position;
	@each $o in top right bottom left {
		$i: index($args, $o);

		@if $i and $i + 1 <= length($args) and type-of(nth($args, $i + 1)) == number {
			#{$o}: nth($args, $i + 1);
		}
	}
}
// Absolutely positioning stuff
@mixin absolute($args) {
	@include position(absolute, $args);
}
@mixin center-things( $direction, $size ) {
	$positions: top right bottom left;
	$offset: $size * -1;

	@if not index( $positions, $direction ) {
		@warn "Direction must be one of `top`, `right`, `bottom` or `left`; currently `#{$direction}`.";
	}
	position: absolute;
	#{$direction}: $offset;

	@if $direction == top or $direction == bottom {
		left: 50%;
		margin-left: $offset;
	} @else if $direction == left or $direction == right {
		top: 50%;
		margin-top: $offset;
	}
}

@function get-opposite-direction( $direction ) {
	$opposite: center;

	@if $direction == top {
		$opposite: bottom;
	}
	@if $direction == bottom {
		$opposite: top;
	}
	@if $direction == left {
		$opposite: right;
	}
	@if $direction == right {
		$opposite: left;
	}

	@return $opposite;
}
@function opposite-position( $direction ) {
	$positions: top right bottom left;
	$opposite: null;

	@if not index( $positions, $direction ) {
		@warn "Direction must be one of `top`, `right`, `bottom` or `left`; currently `#{$direction}`.";
	} @else {
		$opposite: get-opposite-direction( $direction );
	}

	@return $opposite;
}
@mixin arrow( $direction, $position, $color: currentColor, $size: 10px ) {
	@if $position ==  center {
		@include center-things( $direction, $size );
	} @else {
		@include absolute($position);
	}
	z-index: 2;
	width: 0;
	height: 0;
	border-#{opposite-position($direction)}: $size solid $color;
	@if $direction == top or $direction == bottom {
		border-left: $size solid transparent;
		border-right: $size solid transparent;
	} @else if $direction == left or $direction == right {
		border-top: $size solid transparent;
		border-bottom: $size solid transparent;
	}
	content: '';
}
ul {
	min-height: 40px;
	margin: 40px 0;
	padding-left: 0;
	background-color: grey;
	list-style: none;

	> li {
		display: inline-block;
		position: relative;
		min-width: 190px;
		line-height: 40px;
		text-align: center;
		text-transform: uppercase;
	}
	.top {
	  &::after {
			@include arrow( top, center, black );
		}
	}
	.right {
	  &::after {
			@include arrow( right, center, black );
		}
	}
	.bottom {
	  &::after {
			@include arrow( bottom, center, black );
		}
	}
	.left {
	  &::after {
			@include arrow( left, center, black );
		}
	}
	a {
		display: block;
		color: black;
	}
	
}