sloping-split

index.html

<section class="back">
  <a href="#"><div class="skiing">
    <p>ski</p>
    </div></a>
  <a href="#"><div class="staying">
    <p>stay</p>
    </div></a>
</section>

sloping-split.markdown

sloping-split

A Pen by Roger Knight on CodePen.

License.

style.scss

body {
  margin:0;
  position:relative;
}
.back {
  a {
    text-decoration:none;
    display:block;
  }
  div {
    background-repeat:no-repeat;
    background-position:center center;
    height:350px;
    position: relative;
    p {
      font-family:verdana;
      font-weight:700;
      color:#F86604;
      letter-spacing:6px;
      text-transform:uppercase;
      line-height:0;
      font-size:5em;
      margin:0;
      padding:0;
      position:absolute;
    }
    &:hover {
      p {
          color:lighten(orange,10%);
        }
    }
    &.skiing {
      background-image: url("https://loremflickr.com/1000/600/skier?lock=46");
      clip-path:polygon(0 0, 100% 0, 100% 45%, 0% 100%);
      background-position: bottom center;
      p {
        top:20%;
        left:2rem;
      }
    }
    &.staying {
     background-image: url("https://loremflickr.com/1000/600/ski,accommodation?lock=16");
      clip-path:polygon(0 56%, 100% 0, 100% 100%, 0% 100%);
      background-position:top center;
      margin-top:-23vh;
      p {
        bottom:20%;
        right:2rem;
      }
    }
  }
}

@media screen and (min-width:900px) {
  .back {
    div {
      width:59%;
      top:0;
      position:absolute;
      background-repeat:no-repeat;
      height:500px;
      background-size:cover;
      background-position:center center;
      p {
        font-size:8rem;
      }
      &.skiing {
        left:0;
        clip-path:polygon(0 0, 100% 0, 72% 100%, 0% 100%);
        p {
          position:absolute;
          top:1em;
          left:3rem;
        }
      }
      &.staying {
        right:0;
        margin-top:0;
        clip-path:polygon(28% 0, 100% 0, 100% 100%, 0% 100%);
        background-position: center center;
        p {
          position:absolute;
          bottom:1em;
          right:3rem;
        }
      }
    }
  }
}