jQuery: directionAwareCircle

more at: http://jonrohan.me/guide/css/creating-triangles-in-css/

by kougiland

HTML

<div id="circle">
    <a href="#" class="arrow top"></a>
    <a href="#" class="arrow right"></a>
    <a href="#" class="arrow bottom"></a>
    <a href="#" class="arrow left"></a>
</div>

CSS

body{margin-top:80px; background: whiteSmoke}

#circle {
    
    width: 320px;
    height: 320px;
    left: 200px;
    position: absolute;
    background: white;
    border-radius: 50%;
}
.arrow {position:absolute; width:0; height:0; z-index:-999}
.arrow.top {
    top: -50px;
    left: 100px;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-bottom: 60px solid yellowgreen;
}
.arrow.right {
    top: 100px;
    right: -50px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-left: 60px solid yellowgreen;
}
.arrow.bottom {
    bottom: -50px;
    left: 100px;
    border-left: 60px solid transparent;
    border-right: 60px solid transparent;
    border-top: 60px solid yellowgreen;
}

.arrow.left {
    top: 100px;
    left: -50px;
    border-top: 60px solid transparent;
    border-bottom: 60px solid transparent;
    border-right: 60px solid yellowgreen;
}

JavaScript

$("#circle").on('mousemove', function(e) {
    
    var elem = $(this),
        arrowT = $('.arrow.top'),
        arrowR = $('.arrow.right'),
        arrowB = $('.arrow.bottom'),
        arrowL = $('.arrow.left'),

        offset = elem.offset(),
        pageX = e.pageX - offset.left,
        pageY = e.pageY - offset.top,
        side = {
            top: pageY < (elem.height() / 2) && pageY  > 0 ,
            left: pageX < (elem.width() / 2) && pageX  > 0,
            bottom: pageY > (elem.height() / 2)  && pageY  < elem.height(),
            right: pageX > (elem.width() / 2) && pageX  < elem.width()
        };

    

    arrowT.css({
        top: side.top ? pageY - arrowT.outerHeight() : null
    });
    arrowR.css({
        right: side.right ? -(pageX - (elem.width() - arrowR.outerWidth())) : null
    });
    arrowB.css({
        bottom: side.bottom ? -(pageY - (elem.height() - arrowB.outerHeight())) : null
    });
    arrowL.css({
        left: side.left ? pageX - arrowL.outerWidth() : null
    });
});