Styling the cursor with css - html

Question

I know it's possible to use an image as the cursor, like this:
.module {
cursor: url('path-to-image.png'), auto;
}
Is it also possible to use a custom div element as the cursor or otherwise customize it with css properties? I'd like to use a triangle as shown here. Is that possible somehow?
How would one go about doing this?

Answer 1

I looked into this a bit, and while it's impossible to do with CSS, you can actually do this with jQuery.
You create a div and make it follow the cursor while also hiding the "normal" one, hence creating a bit of a cursor. It's a bit of a hack, as it's not actually a cursor, and it may or may not have some compatibility or functional problems.
Anyway, here's the code:
$(document).bind('mousemove', function(e){
$('#tail').css({
left: e.pageX + 1,
top: e.pageY
});
});
#tail {
position: absolute;
float: left;
width: 0;
height: 0;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
border-left: 10px solid green;
}
* {
cursor: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="tail"></div>
Click me!
I had to offset the cursor by one pixel (e.pageX + 1), otherwise the cursor-div would be directly below the cursor and you'd always be clicking on that instead of the object you actually want to click on.