blob: 07ac6b8e5340bb37faf52f72ef875c96c76afdc7 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
|
<?xml version="1.0" encoding="utf-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<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>
|
