Source code

Revision control

Other Tools

<?xml version="1.0" encoding="utf-8"?>
<head>
<title>Feedback image and CSS transforms</title>
<style type="text/css">
body
{background-color:silver;
margin:0;}
div
{background-color:white;}
div > div
{display:block;
width:100px;
height:87px;
transform-origin:bottom right;
transform:skew(-30deg);
-o-transform-origin:bottom right;
-o-transform:skew(-30deg);
background-color:green;}
</style>
</head>
<body>
<div>
<div draggable="true" ondragstart="event.dataTransfer.effectAllowed = 'copy'"/>
</div>
<p>Try to drag green rhomb above. Feedback overlay should not be rectangular.</p>
</body>
</html>