HTML CSS examples for CSS Widget:Shape
CSS Shape Outside
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style id="compiled-css" type="text/css"> section {<!-- www. ja v a 2 s .c o m--> background:url('https://www.java2s.com/style/demo/Google-Chrome.png'); background-size:cover; padding:6%; position:relative; overflow:hidden; min-width:701px; } section h2, section p { width:41%; padding:3% 6%; position:relative; z-index:2; } section h2 { width:51% } section:before { content:''; position:absolute; left:0; top:0; width:61%; height:301%; background:grey; z-index:0; -webkit-transform-origin:100% 0; -ms-transform-origin:100% 0; transform-origin:100% 0; -webkit-transform:rotate(21deg); -ms-transform:rotate(21deg); transform:rotate(21deg); } </style> </head> <body> <section> <h2>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi ullamcorper molestie lacus sed ferm</p> </section> </body> </html>