Really simple pure css arrow

index.html

<div class="arrow"></div>

really-simple-pure-css-arrow.markdown

Really simple pure css arrow

Just a really simple css arrow :)

A Pen by Antonio Lopez Hernandez on CodePen.

License.

style.scss

body {
    margin: 0;
}

// Position it centrally
.arrow {
    left: 50%;
    position: fixed;
    top: 50%;
    transform: translate3d(-50%,-50%,0px);
}

// The actual arrow styles, make it an area for 50x50 for ease of use on touch devices
.arrow {
    background: #f3f3f3;
    cursor: pointer;
    height: 50px;
    width: 50px;
    
    &:before {
        border-top: 3px solid #333;
        border-right: 3px solid #333;
        box-sizing: border-box;
        content: '';
        height: 16px;
        left: 50%;
        position: absolute;
        top: 50%;
        transform: translate3d(-50%, -75%, 0px) rotate(135deg);
        // Uncomment if you want it to move (probably better not to, looks weird)
        // transition: transform 0.3s;
        // will-change: transform;
        width: 16px;
    }
    
    // The 'flip' state, just on hover for ease atm
    &:hover:before {
        transform: translate3d(-50%, -25%, 0px) rotate(-45deg);
    }
}