Question

我正在尝试创建一个响应标头，该标头具有两个相邻的对角分割的背景图像。

角度的位置应可调节，如下所示：

大多数方法可导致背景图像倾斜，使用没有响应的透明边框或使用剪切路径，这不幸地缺乏浏览器对ie的支持。

.one,
.two {
  flex: 1 1 auto;
}
.spotlight {
  height:350px;
  overflow:hidden;
}
.one, .two {
  background: url(https://via.placeholder.com/150);
  transform: skewX(-20deg)
}
.one {
}
.two {
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="d-flex spotlight">
  <div class="one">a</div>
  <div class="two">a</div>
</div>

codepen

还有其他替代方法吗？

Answer 1

body {
  overflow:hidden;
}

.view {
  bottom:0;
  left:0;
  position:absolute;
  right:0;
  top:0;
  -ms-transform:skew(-5deg);
  -o-transform:skew(-5deg);
  -moz-transform:skew(-5deg);
  -webkit-transform:skew(-5deg);
  transform:skew(-5deg);
}

.left,
.right {
  bottom:0;
  overflow:hidden;
  position:absolute;
  top:0;
}

.left { 
  left:-5%;  
  right:50%;  
}

.right {
  left:50%;
  right:-5%;
}

.img {
  bottom:-5%;
  left:-5%;
  position:absolute;
  right:-5%;
  top:-5%;
  -ms-transform:skew(5deg);
  -o-transform:skew(5deg);
  -moz-transform:skew(5deg);
  -webkit-transform:skew(5deg);
  transform:skew(5deg);
}

.left-img {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/sun.jpg);
  background-position:center center;
  background-size:cover;
}

.right-img {
  background-image: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/71829/moon.jpg);
  background-position:center center;
  background-size:cover;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<div class="view">
  <div class="left">
    <div class="img left-img"></div>
  </div>
  <div class="right">
    <div class="img right-img"></div>
  </div>
</div>
</body>
</html>

根据需要在.right和.left类上调整位置

用背景图像创建两个成角度的div的最佳方法？

1 个答案: