梯形截面，剪切背景图像

Question

我正在尝试创建一个具有梯形形状的Web布局，如上图所示。另外，每个部分都有一个background-image，以cover或类似结果填充背景。

我仅使用skew和两个div就实现了第一部分（深蓝色），如下所示。

但是，我无法创建以下部分，该部分在两种方式上存在偏差。我尝试使用clip-path时不走运。然后，最后一节需要重新整理。

HTML

<section id="my_section">
        <div id="my_section_bg"></div>
        <div id="my_section_content">
            <!-- any typical content, text/images here -->
        </div>
    </section>

CSS

#my_section {
    padding-top: 80px;
    padding-bottom: 90px;

    background-color: rgba(74,90,119,.5);

    transform: skewY(-4deg);
}

#my_section_bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-image: linear-gradient(
        to bottom,
        rgba(29,44,71,.85) 0%,
        rgba(29,44,71,1) 100%
        ), url("./assets/my_bg_img.jpeg");
    background-color: rgba(29,44,71,1);

    transform: skewY(8deg);
}

#my_section_content {
    transform: skewY(4deg);
}

Answer 1

您可以简单地将第二个倾斜部分的一部分隐藏在第一个倾斜部分的下方，以创建此效果。最后一部分也是一样：

这是一个基本示例：

C:\test>c:\Python27\python.exe testargs.py abcdefg
('This is the name of the script: ', 'testargs.py')
('Number of arguments: ', 2)
('The arguments are: ', "['testargs.py', 'abcdefg']")

C:\test>c:\Python36\python.exe testargs.py abcdefg
This is the name of the script:  testargs.py
Number of arguments:  2
The arguments are:  ['testargs.py', 'abcdefg']

.box {
  min-height:250px;
  position:relative;
  overflow:hidden;
  transform-origin:left; /*this will do the magic*/
  max-width:1000px;
  margin:auto;
}
.box:before {
  content:"";
  position:absolute;
  top:-100px;
  left:0;
  right:0;
  bottom:-100px;
  transform-origin:left;
  background:var(--img,red) center/cover;
}

.first {
  transform:skewY(5deg);
  z-index:2;
  --img:url(https://picsum.photos/800/600?image=0)
}
.first:before {
  transform:skewY(-5deg);
}

.second {
  transform:skewY(-5deg);
  z-index:1;
  --img:url(https://picsum.photos/800/600?image=1069)
}
.second:before {
  transform:skewY(5deg);
}

.last {
  --img:url(https://picsum.photos/800/600?image=1053);
  margin-top:-100px;
}

或者使用<div class="first box"> </div> <div class="second box"> </div> <div class="last box"> </div>，您可以像下面那样操作（在各处调整clip-path来控制角度）

50px

.box {
  min-height:250px;
  position:relative;
  overflow:hidden;
  max-width:1000px;
  margin:auto;
}
.first {
  clip-path:polygon(0 0,100% 50px, 100% 100%,0 100%);
  background:url(https://picsum.photos/800/600?image=0) center/cover;
}

.second {  
  clip-path:polygon(0 50px,100% 0, 100% 100%,0 calc(100% - 50px));
  z-index:1;
  margin:-50px auto;
  background:url(https://picsum.photos/800/600?image=1069) center/cover;
}

.last {
  background:url(https://picsum.photos/800/600?image=1053) center/cover;
}

Answer 2

我有一个非常相似的项目正在筹备中，所以我想出了为什么不去尝试一下。根据需要，我认为2x重叠和倾斜的容器将起作用。

但是，如果顶部和底部以不同的角度倾斜将不起作用...因此，最好的选择是绝对定位并使用CSS clip-path的Pseudo元素。我使用this tool来轻松创建剪辑路径。

我这样做是为了避免剪切每个部分的内容，但这对您而言可能无关紧要。

.container {
  width: 80vw;
  margin: 0 auto;
  overflow: hidden;
}

section {
  min-height: 40vh;
  position: relative;
  padding: 2rem;
}

.sec1 {
  background-color: #FFFFFF;
}

.sec2 {
  background: #01579B;
}
.sec2:before {
  content: '';
  position: absolute;
  background-color: #01579B;
  height: 3rem;
  bottom: 100%;
  right: 0;
  left: 0;
  z-index: 10;
  -webkit-clip-path: polygon(0 0, 0% 100%, 100% 100%);
          clip-path: polygon(0 0, 0% 100%, 100% 100%);
}
.sec2:after {
  content: '';
  position: absolute;
  background-color: #01579B;
  height: 7rem;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 10;
  -webkit-clip-path: polygon(100% 0, 0 0, 100% 100%);
          clip-path: polygon(100% 0, 0 0, 100% 100%);
}
.sec2 .decor {
  position: absolute;
  background-color: #D7CCC8;
  height: 6rem;
  bottom: 100%;
  right: 0;
  left: 50%;
  z-index: 5;
  -webkit-clip-path: polygon(100% 0, 0 100%, 100% 100%);
          clip-path: polygon(100% 0, 0 100%, 100% 100%);
}

.sec3 {
  background-color: #0288D1;
}
.sec3:after {
  content: '';
  position: absolute;
  background-color: #0288D1;
  height: 7rem;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 10;
  -webkit-clip-path: polygon(0 0, 0 100%, 100% 0);
          clip-path: polygon(0 0, 0 100%, 100% 0);
}

<div class="container">
	<section class="sec1">Section 1 Content</section>
	<section class="sec2">
		<span class="decor">
<!-- unfortunatly, I needed another element -->
		</span>
		Section 2 Content
	</section>
	<section class="sec3">
		Section 3 Content
	</section>
	<section class="sec4">
		Section 4 Content
	</section>
</div>

我能看到的唯一问题是是否需要图像背景。在这种情况下，您可能要使用复杂的多边形作为整个部分的遮罩。