adding #1

dist/example/index.html

@@ -331,7 +331,11 @@
                     Hero
                 </h3>
 				<h4 class="h6">Html:</h4>
-				<pre class="code"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
+				<pre class="code"><code>&lt;div class=&quot;hero&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
+				<div class="hero" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
+                <pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--top&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
+				<div class="hero hero--top" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
+                <pre class="code margin-top-3"><code>&lt;div class=&quot;hero hero--bottom&quot; style=&quot;height: 300px; background-image: url('https://picsum.photos/1024')&quot;&gt;&lt;/div&gt;</code></pre>
 				<div class="hero hero--bottom" style="height: 300px; background-image: url('https://picsum.photos/1024')"></div>
 
                 <!-- icons -->
@@ -867,6 +871,38 @@ $crispy__spacing__steps: 7;
                     Mixins
                 </h2>
 
+                <!-- mixins / triangle -->
+                <h3 class="h4 margin-top-1x">
+                    Triangle
+                </h3>
+                <h4 class="h6 margin-top-1x">Sass:</h4>
+                <pre class="code"><code>.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+    display: block;
+}
+
+.triangle-left {
+    @include triangle('left', $crispy__color-primary);
+}
+
+.triangle-right {
+    @include triangle('right', $crispy__color-primary);
+}
+
+.triangle-top {
+    @include triangle('top', $crispy__color-primary);
+}
+
+.triangle-bottom {
+    @include triangle('bottom', $crispy__color-primary);
+}
+</code></pre>
+                <p>
+                    <span class="triangle-right"></span>
+                    <span class="triangle-left"></span>
+                    <span class="triangle-top"></span>
+                    <span class="triangle-bottom"></span>
+                </p>
+
 				<!-- mixins / media-queries -->
 				<h3 class="h4 margin-top-1x">
                     Media Queries

src/_functions.scss

@@ -106,29 +106,29 @@
  *
  * @param  {[type]} $directions [description]
  * @return {[type]}             [description]
- * 
+ *
  */
-@function opposite-direction($directions) {
-  $opposite-directions: ();
-  $direction-map: (
-    'top':    'bottom',
-    'right':  'left',
-    'bottom': 'top',
-    'left':   'right',
-    'center': 'center',
-    'ltr':    'rtl',
-    'rtl':    'ltr'
-  );
-
-  @each $direction in $directions {
+@function oppositeDirection($direction) {
+
+    $opposite-direction: 0;
+
+    $direction-map: (
+        'top':    'bottom',
+        'right':  'left',
+        'bottom': 'top',
+        'left':   'right',
+        'center': 'center',
+        'ltr':    'rtl',
+        'rtl':    'ltr'
+    );
+
     $direction: to-lower-case($direction);
 
     @if map-has-key($direction-map, $direction) {
-      $opposite-directions: append($opposite-directions, unquote(map-get($direction-map, $direction)));
+        $opposite-direction: map-get($direction-map, $direction);
     } @else {
-      @warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
+        @warn "No opposite direction can be found for `#{$direction}`. Direction omitted.";
     }
-  }
 
-  @return $opposite-directions;
+    @return $opposite-direction;
 }

src/_mixins.scss

@@ -135,6 +135,7 @@
  *
  */
 @mixin triangle($direction, $color: currentcolor, $size: 1em) {
+
     @if not index(top right bottom left, $direction) {
         @error "Direction must be either `top`, `right`, `bottom` or `left`.";
     }
@@ -143,7 +144,20 @@
     height: 0;
     content: '';
     z-index: 2;
-    border-#{opposite-position($direction)}: ($size * 1.5) solid $color;
+
+    // adding opposite postion for border
+    $opposite: oppositeDirection($direction);
+
+    // @TODO with #{opposite-position($direction)} it breaks in webpack
+    @if $opposite == top {
+        border-top: ($size * 1.5) solid $color;
+    } @else if $opposite == bottom {
+        border-bottom: ($size * 1.5) solid $color;
+    } @else if $opposite == left {
+        border-left: ($size * 1.5) solid $color;
+    } @else if $opposite == right {
+        border-right: ($size * 1.5) solid $color;
+    }
 
     $perpendicular-borders: $size solid transparent;
 

src/components/_hero.scss

@@ -2,7 +2,7 @@
  * component: hero
  *
  * background-size is as default: cover - Resize the background image to cover the entire container
- * 
+ *
  * <div class="hero" style="width: value; height: value; background-image: url(path)">
  *
  * </div>

src/example/styles.scss

@@ -45,3 +45,23 @@
         display: block;
     }
 }
+
+.triangle-left, .triangle-right, .triangle-top, .triangle-bottom {
+    display: block;
+}
+
+.triangle-left {
+    @include triangle('left', $crispy__color-primary);
+}
+
+.triangle-right {
+    @include triangle('right', $crispy__color-primary);
+}
+
+.triangle-top {
+    @include triangle('top', $crispy__color-primary);
+}
+
+.triangle-bottom {
+    @include triangle('bottom', $crispy__color-primary);
+}