CODEWITHSUNDEEP
htmlcsssvgresponsive-designcss-shapes
Oli Fletcher
Oli Fletcher

Reputation: 309

Creating a responsive triangle with repeating background image

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: enter image description here

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

Upvotes: 4

Views: 459

Answers (3)

web-tiki
web-tiki

Reputation: 103760

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>

Upvotes: 4

Paulie_D
Paulie_D

Reputation: 114990

You can do this with a pseudo element which can receive a background image.

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

Upvotes: 1

jbutler483
jbutler483

Reputation: 24539

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>

Upvotes: 3

Related Questions