CSS mask clipping and overlay svg to achieve a two effect

Vote count:

0

I am currently attempting to create a two SVG overlay / masking like the image below

I have created a Svg for the overlay. As it stands i am trying to create two elements one for the green side and one for the blue side.

I have almost achieve the effect using the clip css property it seems to be working however i have noticed when i decrease the screen size both SVG masks overlay each other and i lose the effect.

For what i am trying to achieve is this the best approach, if it not what is?

Below is a snippet of my code, i have also added a link below with my code.

    .hero-overlay {
       position: absolute;
        top: 0;
       height: 100%;
       width: 100%;
     -webkit-mask: url("http://ift.tt/1crudTc") no-repeat center center;
      mask: url("http://ift.tt/1crudTc") no-repeat center center;
      clip: rect(0px, 580px, 500px, 0px); }

    .mask-left {
      background-color: red; }

.mask-right {
   -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
      transform: rotate(180deg);
      background-color: blue; }

http://ift.tt/1IHZRcj

asked 1 min ago

NewKidOnTheBlock

161

CSS mask clipping and overlay svg to achieve a two effect