html - 创建具有重复背景图像的响应式三 Angular 形

Question

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

也尝试过使用 borderimage 设置边框，但还是没有成功。

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

有没有人知道如何做到这一点，或者过去有过这样的经历？

编辑

示例:

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

Answer 1

您可以使用 overflow hidden 的旋转容器。
这将允许您在其他图像渐变或任何其他非纯背景上显示这些图像:

DEMO

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

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