split-non-ortho1-ref.html (1235B)
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 6 <meta charset="utf-8"> 7 <title>Split non-orthogonal 1 ref</title> 8 9 <style> 10 .container { 11 margin: 0 0; 12 width: 400px; 13 height: 400px; 14 15 position: absolute; 16 transform-style: preserve-3d; 17 } 18 19 .shape { 20 margin: 0 0; 21 position: absolute; 22 } 23 24 .red-square-back { 25 background-color: rgba(255,0,0,1); 26 27 width: 100px; 28 height: 100px; 29 30 top: 50px; 31 left: 50px; 32 } 33 34 .green-square-back { 35 background-color: rgba(0,255,0,1); 36 37 width: 150px; 38 height: 150px; 39 40 top: 50px; 41 left: 50px; 42 43 transform: rotateZ(45deg); 44 } 45 46 .red-square-front { 47 background-color: rgba(255,0,0,1); 48 49 width: 50px; 50 height: 50px; 51 52 top: 100px; 53 left: 100px; 54 } 55 56 .green-square-front { 57 background-color: rgba(0,255,0,1); 58 59 width: 72px; 60 height: 72px; 61 62 top: 63.5px; 63 left: 63.5px; 64 65 transform: rotateZ(45deg); 66 } 67 68 #canvas { 69 width: 100px 70 height: 100px; 71 72 top: 100px; 73 left: 100px; 74 } 75 76 </style> 77 </head> 78 79 <body> 80 <div class="container"> 81 <div class="shape red-square-back"></div> 82 <div class="shape green-square-back"></div> 83 <div class="shape red-square-front"></div> 84 <div class="shape green-square-front"></div> 85 </div> 86 </body> 87 88 </html>