创建具有重复背景图像的响应三角形

Question

我正在尝试为网站创建一个三角形，它始终保持100％的宽度，并且具有重复的背景并覆盖动态背景。很高兴使用任何方法，到目前为止已经尝试过使用带有模式的SVG，但没有成功。

也尝试与borderimage接壤，但再次没有成功。

我应该提到这将覆盖一个图像，所以对于一个三角形的半个矩形正在使用重复的图像，另一半需要是透明的。

有没有人对如何做到这一点或过去经历过这个有什么想法？

修改

示例：

这些是3px x 3px正方形中的1px x 2px黑线。

Answer 1

您可以使用隐藏溢出的旋转容器 这将允许您在其他图像上以渐变或任何其他非普通背景显示这些图像：

<强> DEMO

＆＃13;

＆＃13;

.wrap {
    transform-origin:0 100%;
    transform:rotate(-3deg);
    overflow:hidden;
    width:100%;
    padding-right:5%;
}
.images {
    transform-origin:inherit;
    transform:rotate(3deg);
    overflow:hidden;
    -webkit-backface-visibility:hidden; /** <-- to prevent diagonal line aliasing in chrome **/
}
img {
    float:left;
    width:24%;
    margin:0 .5%;
}

/** FOR THE DEMO **/
body{background:url('https://farm7.staticflickr.com/6139/5986939269_10721b8017.jpg');background-size:cover;overflow-x:hidden;}

＆＃13;

<div class="wrap">
    <div class="images">
        <img src="http://lorempixel.com/output/people-q-c-300-200-9.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-3.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-6.jpg" alt="" />
        <img src="http://lorempixel.com/output/people-q-c-300-200-1.jpg" alt=""/>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您可以使用伪元素来重叠图像：

＆＃13;

＆＃13;

html,
body {
  margin: 0;
  padding: 0;
}
div {
  width: 100vw;
  background: rgba(0, 0, 0, 0.4);
  height: 300px;
  position: relative;
  overflow: hidden;
  display: inline-block;
}
div:after {
  content: "";
  position: absolute;
  width: 150vw;
  height: 40vw;
  bottom: -30vw;
  left: -25vw;
  background: #222;
  -webkit-transform: rotate(-5deg);
  transform: rotate(-5deg);
}

＆＃13;

<div>
  <img src="http://placekitten.com/g/200/300" alt="" />
  <img src="http://placekitten.com/g/200/300" alt="" />
  <img src="http://placekitten.com/g/200/300" alt="" />
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用可以接收背景图像的伪元素来执行此操作。

＆＃13;

＆＃13;

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.wrapper {
  position: relative;
  width: 80%;
  margin: 25px auto;
  padding: .25em;
  border: 1px solid grey;
  overflow: hidden;
  /* quick clearfix */
}
.wrapper::after {
  position: absolute;
  content: "";
  width: 150%;
  height: 50%;
  background-color: rgba(255, 0, 0, 0.5);
  bottom: 0;
  right: 0;
  transform: rotate(-5deg);
  transform-origin: top right;
}
.wrapper img {
  max-width: 25%;
  height: auto;
  float: left;
}

＆＃13;

<div class="wrapper">
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" />
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" />
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" />
  <img src="http://lorempixel.com/output/nature-q-c-200-200-3.jpg" alt="" />
</div>

＆＃13;

＆＃13;

＆＃13;