Creating a responsive triangle with repeating background image

Question

I am trying to create a triangle for a website, that maintains 100% width at all times as well as having a repeating background and to overlay a dynamic background. Happy to use any method, so far have tried using SVG with a pattern, with no success.

Also tried border with borderimage, but again with no success.

I should mention this will be overlaying an image, so with a triangular half a rectangle is using the repeating image, the other half needs to be transparent.

Does anyone have any ideas as to how this may be done, or experienced it in the past?

EDIT

Example:

Those are 1px x 2px black lines in 3px x 3px squares.

Answer 1

You can use a rotated container with overflow hidden.
This will allow you to display those images over an other image a gradient or any other non plain background :

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>

Answer 2

You could use a pseudo element for this in order to overlap your images:

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

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