倾斜CSS-将元素放在右上角和左下角

Question

Hello i'm trying to find the best way of keeping my skewed elements in place whist resizing page.

I want to be able to extend the content area (green area) and keep that the same shape but also have the white corners the same shape as well.

Sorry for my lack of knowledge in this area, i'm currently still learning this

I will accept JavaScript or JQuery solutions.

Here is an example what I have so far:

 /* Latest compiled and minified CSS included as External Resource*/ .container-fluid{ background: green; padding: 0px; color: black; position: relative; } .container{ padding: 50px; } .overlay-top-right { position: absolute; right: 0; top: 0; height: 300px; width: 30%; background: #ffffff; transform-origin: top right; -ms-transform: skew(45deg,0deg); -webkit-transform: skew(45deg,0deg); transform: skew(45deg,0deg); } .overlay-bottom-left { position: absolute; left: 0; bottom: 0; height: 300px; width: 40%; background: #ffffff; transform-origin: bottom left; -ms-transform: skew(45deg,0deg); -webkit-transform: skew(45deg,0deg); transform: skew(45deg,0deg); } /* Optional theme */ @import url('//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap-theme.min.css'); 

 <div class="container-fluid"> <div class="overlay-top-right"></div> <div class="overlay-bottom-left"></div> <div class="container"> <div class="row"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci. Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor. Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur. Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim. Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci. Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor. Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur. Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim. Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna. </div> </div> </div> 

Answer 1

You may replace your elements by :before and :after on the text area and use floating like this:

 /* Latest compiled and minified CSS included as External Resource*/ .container-fluid{ background: green; padding: 0px; color: black; position: relative; } .container{ padding: 50px; overflow:hidden; } .overlay { position:relative; } .overlay:before { content:" "; float:right; margin-right: -50px; margin-top: -50px; height: 150px; width: 150px; background: #ffffff; transform-origin: top right; -ms-transform: skew(45deg,0deg); -webkit-transform: skew(45deg,0deg); transform: skew(45deg,0deg); } .overlay:after { content:" "; float:left; position:relative; margin-left: -50px; margin-bottom: -50px; height: 100px; width: 100px; background: #ffffff; transform-origin: bottom left; -ms-transform: skew(45deg,0deg); -webkit-transform: skew(45deg,0deg); transform: skew(45deg,0deg); } /* Optional theme */ 

 <div class="container-fluid"> <div class="container"> <div class="row overlay"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci. Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor. Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur. Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim. Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis tempus arcu a nisl bibendum interdum sed in velit. Etiam semper sem ac nisl rhoncus, at molestie lectus laoreet. Phasellus pulvinar libero mi, a aliquet felis condimentum ut. Morbi massa libero, finibus vitae pellentesque vitae, dignissim sed purus. Ut volutpat consequat commodo. Praesent consequat eget mauris sed viverra. Etiam ac dui vel turpis rutrum tincidunt eu vitae orci. Nunc rhoncus molestie eros nec aliquet. Vestibulum et blandit orci, vitae molestie massa. Morbi hendrerit orci ac interdum tincidunt. Nulla facilisi. Nulla blandit purus eget mattis eleifend. Etiam blandit, enim vel porttitor mollis, diam massa suscipit metus, ut ornare tellus arcu nec orci. Pellentesque bibendum dignissim tincidunt. Morbi vel sem lacus. Cras vitae laoreet eros. Aenean hendrerit ante semper, auctor ligula et, interdum sapien. Duis placerat urna at velit tincidunt commodo. Fusce condimentum mauris ut ornare euismod. Duis iaculis, augue in varius pretium, justo ligula volutpat est, et ornare dui nibh a sem. Quisque sit amet ultricies tortor. Praesent egestas tincidunt massa convallis elementum. Fusce ac nisl sed arcu placerat commodo ut a lacus. Donec eget blandit lacus. Vivamus ac efficitur nunc. Nulla facilisi. Phasellus vel ipsum tempus, imperdiet dolor quis, rhoncus magna. Duis lobortis, nisl non lobortis faucibus, risus metus ullamcorper mauris, a ultricies quam nibh vitae sapien. Nulla facilisi. Donec luctus in libero vel pharetra. Maecenas mollis quam libero, eget pellentesque risus convallis at. Morbi laoreet vitae urna id accumsan. Etiam eu porttitor dolor. Curabitur eu sagittis augue. Phasellus at laoreet lacus. Donec interdum aliquet consectetur. Etiam vestibulum sapien in metus iaculis bibendum. Fusce aliquet sodales leo, et interdum nisl gravida non. Quisque eget lobortis metus, ac euismod ipsum. Cras ac gravida purus. Integer erat orci, feugiat eget tortor sit amet, semper fringilla tortor. Duis luctus at magna sodales efficitur. Donec enim nulla, tempor vel dictum nec, porta vel dolor. Vivamus semper dui tortor. Curabitur turpis mi, mollis a sodales sodales, feugiat eu nisi. Pellentesque non fringilla nisl. Donec at dapibus libero, sed tempor arcu. Pellentesque velit ante, interdum in orci at, feugiat viverra orci. Quisque egestas a tortor et ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Nullam ut nunc tempor, dictum orci eu, pharetra enim. Sed accumsan sem ipsum. Integer id dolor quis massa tempor congue ac ut nisi. Pellentesque nulla lectus, efficitur non sagittis quis, ornare vel nisl. Proin tempor ullamcorper turpis, et hendrerit est fermentum rutrum. Ut ligula nisi, varius quis sodales at, euismod et diam. Mauris vel sem a mi eleifend fringilla. Suspendisse magna magna, lacinia sit amet nisl eu, laoreet ultricies erat. Suspendisse non orci ante. Aliquam interdum ac lacus eget ornare. Vestibulum dictum felis vitae hendrerit interdum. Duis quis tempus urna. </div> </div> </div>