Triangles with text

Triangular buttons

by jshacker

HTML

<div class="triangle top clickable"></div>
<div class="triangle right clickable"></div>
<div class="triangle bottom clickable"></div>
<div class="triangle left clickable"></div>
<div class="triangle left top clickable"></div>
<div class="triangle right top clickable"></div>
<div class="triangle right bottom clickable"></div>
<div class="triangle left bottom clickable"></div>

SCSS

/* change $border-width and it still works 
 * Keep it `em` though.
 */
$border-width: 2em;

/* just for the show - can remove it */
div {
  display: inline-block;
}

.before {
  font-size: 0.5em;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  color: black;
  text-align: center;
}

.triangle {
  width: 0;
  height: 0;
  margin: 1em;
  border-width: $border-width;
  border-color: transparent;
  border-style: solid;
  position: relative;

  &.bottom {
    border-top-width: 0;
    $border-bottom-width: $border-width * 2;
    border-bottom-width: $border-bottom-width;
    border-bottom-color: red;
    &::before {
      @extend .before;
      content: "bottom";
      top: $border-bottom-width * 2;
      left: 50%;
      transform: translate(-50%, -100%);
    }
  }
  &.top {
    $border-top-width: $border-width * 2;
    border-top-width: $border-top-width;
    border-bottom-width: 0;
    border-top-color: red;
    &::before {
      @extend .before;
      content: "top";
      top: -$border-top-width * 2;
      left: 50%;
      transform: translate(-50%, 20%);
    }
  }
  &.left {
    $border-left-width: $border-width * 2;
    border-left-width: $border-left-width;
    border-right-width: 0;
    border-left-color: red;
    &::before {
      @extend .before;
      content: "left";
      left: -$border-left-width * 2;
      transform: translate(-20%, -50%) rotate(-90deg);
    }
    &.top {
      border-color: red transparent transparent red;
      border-width: $border-width;
      &::before {
        @extend .before;
        content: "left-top";
        transform: translate(-65%, -50%) rotate(-45deg);
      }
    }
    &.bottom {
      border-color: transparent transparent red red;
      border-width: $border-width;
      &::before {
        @extend .before;
        content: "left-bottom";
        transform: translate(-55%, 0%) rotate(45deg);
      }
    }
  }
...