CSSで三角矢印を描画

CSSのみで三角形を作る方法を解説するよ！｜ついでに扇型や吹き出しも作ってみる - アイデアハッカー
http://ideahacker.net/2013/07/26/5962/

<div class="sankaku"></div>

.sankaku{
	width: 0;
	height: 0;
	border: 80px solid transparent;
	border-top: 80px solid #f00;
}

横長三角

.sankaku{
	width: 0;
	height: 0;
	border-top: 30px solid #f00;
	border-right: 80px solid transparent;
	border-bottom: 30px solid transparent;
	border-left: 80px solid transparent;
}

    &__nav {
      @include tb($point-tb) {
        width: 1260px;
        margin: 0 auto;
        display: block;
      }
      &Arrow {
        display: block;
        position: absolute;
        top: 50%;
        z-index: 10;
        @include sp($point-sp) {
          width: (38px/2);
          height: (38px/2);
          margin: (-38px/4) 0 0 0;
        }
        @include tb($point-tb) {
          width: 38px;
          height: 38px;
          margin: (-38px/2) 0 0 0;
        }
        a {
          position: relative;
          &:before {
            content: '';
            position: absolute;
            display: block;
            left: 0;
            top: 50%;
            border-top: 1px solid #fff;
            border-right: 1px solid #fff;
            @include sp($point-sp) {
              width: (38px/2);
              height: (38px/2);
            }
            @include tb($point-tb) {
              width: 38px;
              height: 38px;
            }
          }
        }
        &.left {
          transform: rotate(225deg);
          left: 20px;
        }
        &.right {
          transform: rotate(45deg);
          right: 20px;
        }
      }
    }