问题:
I would like to get the top slanted div to cover the whole top of the screen, including the white space on the top left. Can someone, please, tell me a way that I can do th...
可以将文章内容翻译成中文,广告屏蔽插件会导致该功能失效:
问题:
I would like to get the top slanted div to cover the whole top of the screen, including the white space on the top left. Can someone, please, tell me a way that I can do that?
Check this link to see how I want it to be: https://imgur.com/a/JDaVuWf
Thank You!
body {
margin: 0;
padding: 0;
color: #fff;
}
.skew {
transform: skew(0deg, -10deg);
background-color: gray;
padding: 200px 0;
margin-top: -100px;
margin-bottom: 200px;
width: 100%;
}
.content {
text-align: center;
transform: skew(0deg, 10deg);
}
.skew2 {
transform: skew(0deg, -10deg);
background-color: blue;
padding: 200px 0;
margin-top: -100px;
margin-bottom: 200px;
}
.content2 {
color: black;
text-align: center;
transform: skew(0deg, 10deg);
}
<section id="sec1">
<div class="skew">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>
<section id="sec2">
<div class="skew2">
<div class="content2">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>
回答1:
You can use ::before for your first section
#sec1:before {
content: '';
position: absolute;
width: 100%;
height: 100px; //or what you need
top: 0;
left: 0;
background: grey;
transform: none;
z-index: 1;
}
回答2:
Use gradient you can easily make the shape cover the whole space and also responsive:
body {
margin: 0;
padding: 0;
}
.skew {
padding:100px 0;
color: #fff;
text-align:center;
background:
linear-gradient(red,red) top/100% calc(100% - 100px) no-repeat,
linear-gradient(to top left,transparent 49%,red 50.5%) bottom/100% 100px no-repeat;
}
.skew2 {
margin-top:-50px;
padding:120px 0;
text-align:center;
background:
linear-gradient(to top left,transparent 49%,blue 50.5%) bottom/100% 100px no-repeat,
linear-gradient(blue,blue) center/100% calc(100% - 200px) no-repeat,
linear-gradient(to bottom right,transparent 49%,blue 50.5%) top/100% 100px no-repeat;
}
<section id="sec1">
<div class="skew">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>
<section id="sec2">
<div class="skew2">
<div class="content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit</p>
</div>
</div>
</section>