Leaning objects

There is css code which transform elements and images by setted degrees. There are two elements, one in left-top corner and second in right-top. It looks like stick notes.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
div#delta {
position:absolute;
top:10px;
left:10px;
transform:rotate(15deg);
-webkit-transform:rotate(15deg);
padding:15px;
background-color:cyan;
color:black;
  }
div#bravo {
position:absolute;
top:10px;
right:10px;
transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
padding:15px;
background-color:yellow;
color:black;
  }
</style>
</head>
<body>
<div id="delta">
<p>This text should match to div orientation.</p>
</div>
<div id="bravo">
<p>Second corner</p>
</div>
</body>
</html>

Responses

0 Replies