html - Skew CSS - 将元素保持在右上角和左下角

Question

您好，我正在尝试找到在调整页面大小时将倾斜元素保持在适当位置的最佳方法。

我希望能够扩展内容区域(绿色区域)并保持相同的形状，但也希望白色 Angular 的形状也相同。

对不起，我在这方面缺乏知识，我目前还在学习中

我会接受 JavaScript 或 JQuery 解决方案。

这是我到目前为止的一个例子:

/* 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

您可以在文本区域用 :before 和 :after 替换您的元素，并像这样使用 float :

/* 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>