I'm very happy with my code at this JSfiddle, but for some reason I can't fathom, the triangles won't reach the top or right edges of their container. I'd be very grateful if someone could take a look and explain why.
#sandpit{
/* display: inline-block; */
position: relative;
margin:20px auto;
width: 600px;
height: 400px;
border: 4px solid #7b6eb1;
border-radius: 5px;
/* background-color: #FFC469; */
background-color: #FFFCCF;
padding: 2px;
}
.draggable{
margin: 0;
width:25px;
height:25px;
}
Change your css for newTriangle to:
.newTriangle{
position:absolute;
right:0;
}