Question

我有3个带有背景图像的div，我希望中心div偏向于背景图像未倾斜，在页面中心创建垂直对角线效果。

此刻我无法让图像填满完整倾斜div的宽度。

使用Codepen here

更容易看出我的意思

由于

HTML：

<div class="skew-bg-container">
      <div class="skew-bg-section first-photo">  
           <h1>Blah</h1>       
      </div>
      <div class="skew-bg-section second-photo">    
          <h1>Blah</h1>  
     </div>
     <div class="skew-bg-section third-photo">
          <h1>Blah</h1>     
     </div>
</div>

CSS：

.skew-bg-container{  
  margin-left: 7em;
  background: #111; 
  position: relative;
}
.skew-bg-section{
  width: 33.333333%;
  height: 100vh;
  float: left; 
  box-sizing: border-box;  
  position: relative;
}
.second-photo{
 background-image: url('http://lorempixel.com/g/1200/803/');
  background-size: cover;
    background-position: 50% 50%;
}
.second-photo::after{
  content: "";
  position: absolute;    
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto; 
  border-right: 6px solid tomato;
  border-left: 6px solid tomato;
  transform: skewX(-9deg);
 z-index: 3;
}
.first-photo{
 background-image: url('http://lorempixel.com/g/1200/802/');
  background-size: cover;
  background-position: 50% 50%;
}
.third-photo{
 background-image: url('http://lorempixel.com/g/1200/801/');
  background-size: cover;
  background-position: 50% 50%;
}

Answer 1

您可以使用:: before（伪元素）中的background-image放置实际图像，也可以更改此元素。我将.skew-bg-container更改为计算位置并在菜单后设置它，你可以看到下面这个例子：

我希望它有所帮助

body{
  font-family: open sans;
  margin: 0;
  padding: 0;
}
h1{
  text-align: center;
  text-transform: uppercase;
  color: salmon;
}
.menu-container{
  width: 7em;
  height: 100vh;
  background: Tomato;
  position: fixed;
  z-index:1000;

  li{
    display: block;
    }
  a{
    color:#222;
    font-size: 1.2em;
    text-transform: uppercase;
    text-decoration: none;
  }
}
.skew-bg-container{  
  margin-left: 7em;
  background: #111; 
  position: relative;
}
.skew-bg-section{
  width: 33.333333%;
  height: 100vh;
  float: left; 
  box-sizing: border-box;  
  position: relative;
  left: calc(-7em / 3);
}
.first-photo{
  position:relative;
}

.first-photo > *, .second-photo > *, .third-photo > *{
  z-index:200;  
  position: relative;
}

.first-photo::before{
  background-image: url('http://lorempixel.com/g/1200/802/');
  content: "";
  background-size: cover;
  background-position: 50% 50%;
  transform: skewX(-9deg);
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
}

.second-photo::before{
  background-image: url('http://lorempixel.com/g/1200/803/');
  content: "";
  background-size: cover;
  background-position: 50% 50%;
  transform: skewX(-9deg);
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
}
.third-photo::before{
  background-image: url('http://lorempixel.com/g/1200/801/');
  content: "";
  background-size: cover;
  background-position: 50% 50%;
  transform: skewX(-9deg);
  position: absolute;
  top:0;
  left:0;
  bottom:0;
  right:0;
  z-index:10;
}

<html>
  <body>
 
<div class="menu-container">
    <nav>
      <ul>
        <p>Menu</p>
        <li>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
          <a class="main-menu-link" href="#">link</a>
        </li>
      </ul>
    </nav>
  </div>

    <div class="skew-bg-container">
      <div class="skew-bg-section first-photo">  
          <h1>Blah</h1>       
      </div>
      <div class="skew-bg-section second-photo">    
          <h1>Blah</h1>  
      </div>
      <div class="skew-bg-section third-photo">
          <h1>Blah</h1>     
      </div>
    </div>
   </html>
  </body>

让中心div偏斜，背景图像不倾斜，在页面中心向下创建垂直对角线效果

1 个答案: