HTML CSS examples for CSS Layout:Position
Positioning Upright Element Inside Rotated Container
<html lang="en"> <head> <title>Lorem </title> <style> body {<!--from www . j av a2 s .c o m--> padding:3em 6em; } .wrapper { border-left:4px solid Chartreuse; } .wrapper .container { opacity:0.8; width:301px; background-color:yellow; border-radius:0 41px 41px 0; overflow:hidden; transform:rotate(11deg); transform-origin:0 0; } .wrapper .sizing-wrapper { width:100%; padding-top:151%; position:relative; } .wrapper .img { position:absolute; top:51%; left:51%; background:url('https://www.java2s.com/style/demo/Google-Chrome.png') no-repeat right top; background-size:cover; height:111.573842630%; width:125.5280657352%; transform:rotate(-11deg) translateY(-51%) translateX(-51%); transform-origin:0 0; } </style> </head> <body translate="no"> <div class="wrapper"> <div class="container"> <div class="sizing-wrapper"> <div class="img"></div> </div> </div> </div> </body> </html>