The cursor property in CSS controls what the mouse cursor will look like when it is located over the element in which this property is set. Obviously, it only is relevant in browsers/operating systems in which there is a mouse and cursor. They are used essentially for UX - as they convey the idea of certain functionality. So try not to break that affordance =).
Codepen live
Square using css
#square { width: 100px; height: 100px; background: red; }
Rectengle
#rectengle { background: red; height: 100px; width: 200px; }
Circle
#circle { background: red; border-radius: 50%; height: 100px; width: 100px; }
Triangle up
#triangle_up { width: 0;height: 0;border-left: 50px solid transparent;border-right: 50px solid transparent;border-bottom: 100px solid red; }
More....
::after is a pseudo element which allows you to insert content onto a page from CSS (without it needing to be in the HTML). While the end result is not actually in the DOM, it appears on the page as if it is, and would essentially be like this:
div::after { content: "hi"; }
<!-- Rest of stuff inside the div -->
<div> hi </div>
Give your multiple background canvases
