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

Question

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

如果只是形状本身，那就不是问题了。但是有一些问题:

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

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

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

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

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

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 更好，但如果没有其他办法的话

编辑:我不想用 clip-paths 来做这个，因为它对浏览器的支持很差......

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;
}