Can someone, please, tell me how to get the top slanted div to cover the whole top of the screen?

问题: 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>

  • 发表于 2018-07-05 19:12
  • 阅读 ( 261 )
  • 分类:sof

条评论

请先 登录 后评论
不写代码的码农
小编

篇文章

作家榜 »

  1. 小编 文章
返回顶部
部分文章转自于网络,若有侵权请联系我们删除