CSS:制作两个互补的对角div [英] CSS: Making two complementary diagonal divs

问题描述

这就是我想要做的:

这是我尝试执行的操作: 第一个div' subCont1 '可以正常工作，即使它不在页面中.如果我第二次执行相同的操作，则这次滚动会出于相同原因激活 .

This is how I was trying to do it: The first div 'subCont1' works fine, even if it's getting out of the page. If I do the same thing with the second, this time scroll activates for the same reason.

.subCont1{
  
    background-color: blueviolet;
    position:absolute;
    left:-20%;
    top:0;

    width:70%;
    height:100%;
    transform: skew(-20deg); 

    border:2px solid yellow;
}

.subCont2{    
  
      width:50%;
      height:100%;

      border:2px solid grey;

      z-index:1000;

      overflow:hidden;
  }

推荐答案

我为我的一个项目制作了一个偏斜的手柄，该手柄支持使用javascript动画，但是我按照设计将其制作得简单而原始你提到过希望有帮助.

I made this for one of my projects with a skewed handle which supported an animation using javascript but I took out those to make it raw and simple as per the design you mentioned. Hope, it helps.

#wrapper{
  position:relative;
  width:100%;
  min-height:300px;
  overflow:hidden;
  z-index: 100;
  border:2px solid black;
}

.layer{
  position:absolute;
  width:100vw;
  min-height:300px;
  overflow:hidden;
  border:2px solid black;
}

.layer .content-wrap{
  position:absolute;
  width:100vw;
  min-height:300px;
}

.layer .content-body{
  width:25%;
  position:absolute;
  top:40%;
  text-align:center;
  transform: translateY(-50%);
}

.bottom{
  background: green;
  z-index:101;
}

.bottom .content-body{
  right:10%;
}

.top{
  background: red;
  color:#222;
  z-index:102;
  width:50vw;
}

.top .content-body{
  left:5%;
  color:#222;
}

.skewed .top{
  transform: skew(-20deg);
  margin-left:-1000px;
  width:calc(50vw + 1000px);
}

.skewed .top .content-wrap{
  transform: skew(20deg);
  margin-left:1000px;
}

<section id="wrapper" class="skewed">
  <div class="layer bottom">
    <div class="content-wrap">
      <div class="content-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et.</p>
      </div>
    </div>
  </div>

  <div class="layer top">
    <div class="content-wrap">
      <div class="content-body">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore . </p>
      </div>
    </div>
  </div>

</section>

这篇关于CSS:制作两个互补的对角div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！