Question

我需要制作这样的内容块：

如果它只是形状本身，那就没问题了。但是有一些问题：

白色容器内的图像应该在该曲线上结束（红线），如溢出隐藏，只有它在曲线边缘不起作用。
在它下面会有一个你可以看到的黑色三角形的图案/图像（因此任何带有旋转元素的选项都会有一些颜色无效）
也会出现在容器下方的图像。

我认为我可以轻松地使用z-index游戏制作图层，但主要的一点是白色容器内的图像不应该穿过那些箭头边缘（溢出：隐藏），再加上制作图案和图像（之后就是它可见。

这是我在JSfiddle中转移的最后一张镜头（在顶部和底部有绝对定位的css三角形）：

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

Div容器顶部和底部有“箭头”类型

1 个答案: