两侧的“剪切”页面答案

【问题标题】：'Cut' page on two sides两侧的“剪切”页面
【发布时间】：2016-09-28 02:26:39
【问题描述】：

我想从两侧“剪切”我的页面，如下所示：

http://i.stack.imgur.com/ngZrp.jpg

#left {
   background: url(https://static.pexels.com/photos/24353/pexels-photo.jpg);
   width: 50%;
   position: absolute;
   left: 0px;
   height: 100%;
}

#right {
   background: url(http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ferrari-488gtb-photo-658256-s-original.jpg);
   width: 50%;
   position: absolute;
   right: 0px;
   height: 100%;
}

但是：

我需要这些图片响应
我想创建这个“斜线”

我该怎么做？

编辑
This 没有解决我的问题 - 我需要它在整页上并且图像之间没有空格。

【问题讨论】：

Adjacent divs with angled borders?的可能重复
为什么不直接创建该图像？
@CharlieFish 因为我会为这个侧面创建一个小“滑块”，而且我不能为此剪切所有图像。
@David 你看过上面发布的链接了吗？这有帮助吗？

标签： html css

【解决方案1】：

提示是使用变换和一些填充。

average example

body {
  margin: 0;
  padding: 0;
  width:100%;
  overflow-x:hidden;
  color:turquoise;
  text-shadow:0 0  white;
  font-size:2em;
}

#left {
  position: absolute;
  left: -10%;
  height: 100%;
}

#left,
#right {
  width: 60%;
  transform: skew(-15deg);
  overflow: hidden;
}

#left .content {
  background: url(https://static.pexels.com/photos/24353/pexels-photo.jpg);
  height: 100%;
}

#right .content {
  height: 100%;
  background: url(http://media.caranddriver.com/images/media/51/25-cars-worth-waiting-for-lp-ferrari-488gtb-photo-658256-s-original.jpg);
}

#right {
  position: absolute;
  right: -10%;
  height: 100%;
}

#left .content, 
#right .content{
  width: 100%;
  padding: 0 20%;
  margin: 0 -15%;
  transform: skew(15deg);
  display: flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
}

<div id="left">
  <div class="content">Content here</div>
</div>
<div id="right">
  <div class="content">Content here</div>
</div>

【讨论】：

【解决方案2】：

您可以使用clip-path、support。

.clipped-img {
  position: relative;
}
.clipped-img img {
  position: absolute;
  width: 50%;
}
.clipped-img img:nth-child(1) {
  -webkit-clip-path: polygon( 0% 0, 100% 0, 80% 100%, 0 100% );
  clip-path: polygon( 0% 0, 100% 0, 80% 100%, 0 100% );
}
.clipped-img img:nth-child(2) {
  right: 10%;
  -webkit-clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% );
  clip-path: polygon( 20% 0, 100% 0, 100% 100%, 0 100% );
}

<div class="clipped-img">
  <img src="http://placehold.it/500x300/FC0/">
  <img src="http://placehold.it/500x300/CC0/">
</div>

【讨论】：