0
こんにちは私はスキューされた要素をサイズ変更ページに保存する最良の方法を見つけようとしています。スキューCSS - 要素を右上と左下の角に保ちます。
私はコンテンツ領域（緑色の領域）を拡張し、同じ形を保つことができますが、同様に白い角も同じ形にしたいと考えています。この分野での知識の私の不足のため
申し訳ありませんが、私は現在、まだ私は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>
\t <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>
ヘイ・テマニ、助けてくれてありがとう。右下が左下よりも大きくなるようにしたい。また、それらを両方とも角の三角形にしたい。これは可能ですか？ –
ああ、三角形が欲しいかどうか分からない、答えを更新する;） –
三角形はページのサイズ変更とサイズの拡大/縮小の同じ位置にとどまるでしょうか？ –