html - 顶部和底部类型为 "arrow"的 Div 容器

Question

我需要制作这样的内容 block :

如果只是形状本身，那不会有问题。但也存在一些问题:

• 白色容器内会有图像，应该在该曲线(红线)处结束，就像溢出隐藏一样，只是它在 flex 边缘不起作用。

• 在它的下面会有一个您可以看到的黑色三 Angular 形的图案/图像(因此任何在其顶部带有某种颜色的旋转元素的选项都不起作用)

• 在容器之后，容器下方也会有图像。

我认为我可以使用 z-index 游戏轻松制作图层，但要点是白色容器内的图像不应穿过这些箭头边缘(溢出:隐藏)，再加上制作图案和图像(紧随其后)它)可见。

这是我错过的最后一个镜头(顶部和底部有绝对定位的 css 三 Angular 形)在 JSfiddle 中传输:

https://jsfiddle.net/vhdtq7c1/3/

HTML:

<div class="arrow-style">
  <span class="top-arr arrow"></span>
    <img src="https://www.html5rocks.com/en/tutorials/speed/img-compression/len_std.jpg">
  <span class="bottom-arr arrow"></span>
</div>

<div class="content-between">
    <img src="http://www.fmwconcepts.com/misc_tests/laplacians/lena_lap1.png">
</div>

<div class="arrow-style">
  <span class="top-arr arrow"></span>
  <span class="bottom-arr arrow"></span>
</div>

<div class="content-between">

</div>

<div class="arrow-style">
  <span class="top-arr arrow"></span>
  <span class="bottom-arr arrow"></span>
</div>

CSS:

body {
  margin:0;
  padding:0;
  background: url(https://images.blogthings.com/whatpatternisyourbrainquiz/pattern-2.jpg);
}
.arrow-style {
    margin-top: 100px;
    width: 100%;
    background: white;
    position: relative;
    height: 170px;
}
span.arrow {
    width: 0;
    height: 0;
    border-style: solid;
    display: block;
    position: absolute;
}
.top-arr {
    border-width: 0 50vw 70px 50vw;
    border-color: transparent transparent white transparent;
    top: -69px;
}
.bottom-arr {
    border-width: 70px 50vw 0 50vw;
    border-color: white transparent transparent transparent;
    bottom: -69px;
}

.content-between {
  width: 100%;
  height:200px;
}
.arrow-style img {
  position: absolute;
  top: 10px;
  right:20px;
  z-index: 1;
}
.content-between img {
  width:300px;
  height:auto;
}

也许有一些 JavaScript 解决方案可以解决这个问题？我知道最好只在类似情况下使用 CSS，但如果没有其他方法

编辑: 我不想使用剪辑路径执行此操作，因为它的浏览器支持非常差...

Answer 1

所以我按照这种方式工作:

https://jsfiddle.net/b5ohf3n7/12/

我制作了两个旋转容器并在其中放入白线。这样，旋转容器中的图片就可以精确地以箭头所在的线结束。背景及其下面的所有背景内容也是可见的，看起来不错。感谢您的评论并希望对某人有所帮助!

HTML:

<div class="page">
  <div class="upper">
    <div class="content-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
      in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </div>
    <div class="left-container">
      <div class="left">
        <div class="lower-part"></div>
      </div>
    </div>
    <div class="right-container">
      <div class="right">
        <div class="lower-part"></div>
        <img src="https://cdn.kastatic.org/images/avatars/robot_male_2.png" class="image">
      </div>
    </div>
  </div>
  <div id="background">
    <div class="pattern-container">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </div>
  </div>
</div>

CSS:

#background {
  z-index: 0;
  clear: both;
  width: 100%;
  height: 300px;
  position: relative;
  background: url('http://d5prcm06amy2t.cloudfront.net/mobile/mobile-hank04-shadow.png') left top no-repeat, url('http://www.quackit.com/pix/web_graphics/free_website_graphics/background_patterns/03b.jpg') left top repeat;
  color: white;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-align: center;
  text-transform: uppercase;
}

.upper {
  background-color: white;
  height: 208px;
  width: 100%;
  overflow: visible;
  z-index: 1;
  position: relative;
}

.right {
  z-index: 1;
  width: 110%;
  position: absolute;
  bottom: 30px;
  right: 0;
  height: 100%;
  overflow: hidden;
  -o-transform: rotate(-5deg);
  -moz-transform: rotate(-5deg);
  -webkit-transform: rotate(-5deg);
  -ms-transform: rotate(-5deg);
}

.image {
  position: absolute;
  bottom: -15px;
  left: 95px;
  -o-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
}

.lower-part {
  background-color: white;
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 70px;
  -webkit-backface-visibility: hidden;
}

.left {
  z-index: 1;
  width: 110%;
  position: absolute;
  bottom: 30px;
  height: 200px;
  overflow: hidden;
  -o-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -webkit-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
}

.content-container {
  width: 80%;
  margin: 0 auto;
  z-index: 2;
  position: relative;
}

.left-container {
     padding: 0;
    height: 100px;
    width: 50%;
    left: 0;
    overflow: hidden;
    bottom: -60px;
    position: absolute;
    margin: 0;
}

.right-container {
      padding: 0;
    height: 300px;
    width: 50%;
    right: 0;
    overflow: hidden;
    bottom: -60px;
    position: absolute;
    margin: 0;
}

.pattern-container {
  width: 40%;
  float: right;
  padding: 20px;
  margin-top: 85px;
}

.page {
  width: 100%;
  overflow: hidden;
}