Cacher is the code snippet organizer for pro developers

1.CSS Triangles with Borders:
> HTML:
<div class="arrow-up"></div>
<div class="arrow-right"></div>
<div class="arrow-down"></div>
<div class="arrow-left"></div>

> CSS:
.arrow-up,
.arrow-right,
.arrow-down,
.arrow-left {
  width: 0;
  height: 0;
}

.arrow-up {
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-bottom: 20px solid #8888e8;
}

.arrow-right {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-left: 20px solid #e888a3;
}

.arrow-down {
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    border-top: 20px solid #f7df6c;
}

.arrow-left {
    border-top: 16px solid transparent;
    border-bottom: 16px solid transparent;
    border-right: 20px solid #8de698;
}

2.CSS Triangles Using Clip-path (https://bennettfeely.com/clippy/):
> HTML:
    <div class="arrow-up"></div>
    <div class="arrow-right"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>
    
> CSS:
.arrow-up {
    width: 32px;
    height: 20px;
    background-color: #8888e8;
    clip-path: polygon(50% 0, 0 100%, 100% 100%);
}

.arrow-right {
    width: 20px;
    height: 32px;
    background-color: #e888a3;
    clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.arrow-down {
    width: 32px;
    height: 20px;
    background-color: #f7df6c;
    clip-path: polygon(100% 0, 0 0, 50% 100%);
}

.arrow-left {
    width: 20px;
    height: 32px;
    background-color: #8de698;
    clip-path: polygon(100% 100%, 100% 0, 0 50%);
}

3.CSS Triangles with HTML Entities:
> HTML:
left   -  &#9668;
right  -  &#9658;
down   -  &#9660; 
bottom -  &#9650;
> CSS:
◄,►,▼,▲

4. CSS Triangles with Rotation Transform (SCSS):
> HTML:
    <div class="arrow-up"></div>
    <div class="arrow-right"></div>
    <div class="arrow-down"></div>
    <div class="arrow-left"></div>
> SCSS:
$size: 40;

.arrow-up {
    width: #{$size}px;
    height: #{$size}px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        display: block;
        width: #{$size / 1.41}px;
        height: #{$size / 1.41}px;
        position: absolute;
        bottom: 0;
        left: 0;
        background: #8888e8;
        transform: rotate(45deg);
        transform-origin: 0 100%;
    }
}

.arrow-right {
    width: #{$size}px;
    height: #{$size}px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        display: block;
        width: #{$size / 1.41}px;
        height: #{$size / 1.41}px;
        position: absolute;
        top: 0;
        left: 0;
        background: #e888a3;
        transform: rotate(45deg);
        transform-origin: 0 0;
    }
}

.arrow-down {
    width: #{$size}px;
    height: #{$size}px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        display: block;
        width: #{$size / 1.41}px;
        height: #{$size / 1.41}px;
        position: absolute;
        top: 0;
        left: 0;
        background: #f7df6c;
        transform: rotate(-45deg);
        transform-origin: 0 0;
    }
}

.arrow-left {
    width: #{$size}px;
    height: #{$size}px;
    position: relative;
    overflow: hidden;
    
    &::before {
        content: '';
        display: block;
        width: #{$size / 1.41}px;
        height: #{$size / 1.41}px;
        position: absolute;
        top: 0;
        right: 0;
        background: #8de698;
        transform: rotate(-45deg);
        transform-origin: 100% 0;
    }
}