transforms-skewY-ref.html (993B)
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>CSS Transforms Test: transform property with skew function for Y axis.</title> 5 <link rel="author" title="Jacy-Bai" href="mailto:jinxin.bai@gmail.com"> 6 <link rel="reviewer" title="Dayang Shen" href="mailto:shendayang@baidu.com"> <!-- 2013-09-03 --> 7 <style type="text/css"> 8 .triangle-bottomleft { 9 position: absolute; 10 top: 50px; 11 left: 100px; 12 width: 0; 13 height: 0; 14 border-bottom: 100px solid green; 15 border-right: 100px solid transparent; 16 } 17 .triangle-topright { 18 position: absolute; 19 top: 150px; 20 left: 100px; 21 width: 0; 22 height: 0; 23 border-top: 100px solid green; 24 border-left: 100px solid transparent; 25 } 26 </style> 27 </head> 28 <body> 29 <p>The test passes if there is a green parallelogram and no red.</p> 30 <div class="triangle-topright"></div> 31 <div class="triangle-bottomleft"></div> 32 </body> 33 </html>