.arrow-buttons {
    position: relative;
    height: 100%;
    width: 100%;
}
.arrow-button {
    /* Transparent background */
    background-color: transparent;

    /* Size */
    height: 12px;
    width: 12px;
}

.arrow-button--t {
    /* Edges */
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(25%) rotate(45deg);
}

.arrow-button--r {
    /* Edges */
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    border-top: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(-25%) rotate(45deg);
}

.arrow-button--b {
    /* Edges */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-right: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateY(-25%) rotate(45deg);
}

.arrow-button--l {
    /* Edges */
    border-bottom: 1px solid rgba(0, 0, 0, 0.3);
    border-left: 1px solid rgba(0, 0, 0, 0.3);
    transform: translateX(25%) rotate(45deg);
}

/* Demo */
.arrow-buttons__corner {
    position: absolute;
}
.arrow-buttons__corner--t {
    left: 50%;
    top: 0;
    transform: translate(-50%, 0%);
}
.arrow-buttons__corner--r {
    right: 0;
    top: 50%;
    transform: translate(0%, -50%);
}
.arrow-buttons__corner--b {
    bottom: 0;
    left: 50%;
    transform: translate(-50%, 0%);
}
.arrow-buttons__corner--l {
    left: 0;
    top: 50%;
    transform: translate(0%, -50%);
}