CODEWITHSUNDEEP
cssbackground-imageclip-path
Kenny Lewis Foster
Kenny Lewis Foster

Reputation: 1

Alternative to using clip-path for background images

I'm trying to make a triangular shaped background image overlay a full width image.

enter image description here

It is easy enough to make a triangular shaped background image using border-with, border-color and background-image, like so:

border-width: 350px 50vw 0px 0px;
border-color: white transparent transparent transparent;
background-image: url(/img/rainbow4.jpg);

But as there is white space you cannot overlay on top of another image, you get the following http://codepen.io/anon/pen/ENVWRz

If you set:

border-color: transparent transparent transparent transparent;

Then the image will appear square, so this doesn't work.

I've managed to make it work using clip-path, but this is very poorly supported across many browsers – so I am trying to avoid this approach.

Upvotes: 0

Views: 868

Answers (1)

G-Cyrillus
G-Cyrillus

Reputation: 106008

you can also take a look at mix-blend-mode or background-blend-mode , but also tricky to use and not so much supported yet.

div.triangle_test {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 350px 50vw 0px 0px;
  border-color: white transparent transparent transparent;
  display: block;
  position: absolute;
  z-index: 0;
  right: 0;
  background-image: url('http://img06.deviantart.net/25de/i/2012/134/3/1/037_by_koko_stock-d4zq28i.jpg');
}
div.full_width {
  mix-blend-mode: darken;
  background-image: url('http://somebodymarketing.com/wp-content/uploads/2013/05/Stock-Dock-House.jpg');
  width: 100%;
  height: 350px
}
<div class="triangle_test"></div>
<div class="full_width"></div>

http://codepen.io/gc-nomade/pen/JRdEVO

Upvotes: 0

Related Questions