PRO slant ideation

Skew box exploration v2

by mzilverberg

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/7.0.0/normalize.min.css">
<div class="c-box">

  <figure class="c-box__figure">
    <div class="c-box__img">
      <img src="https://picsum.photos/320/213/?gravity=east" />
    </div>
  </figure>
  
  <div class="c-box__outer">
    <div class="c-box__inner">
      <h2>
      Lorem ipsum dolor sit amet
      </h2>
      <p>
        Maecenas faucibus mollis interdum. Maecenas sed diam eget risus varius blandit sit amet non magna. Nullam quis risus eget urna mollis ornare vel eu leo.
      </p>
    </div>
  </div>
  
</div>

SCSS

@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,400i,800i');

@mixin sizing($sizing: border-box) {
  -webkit-box-sizing: $sizing;
  -moz-box-sizing: $sizing;
  box-sizing: $sizing;
}

@mixin skewX($deg) {
  transform: skewX($deg);
}

@mixin backface-visibility($visibility: hidden) {
  -webkit-backface-visibility: $visibility;
  backface-visibility: $visibility;
}

@mixin slant($color: #1f1f1f) {
  &:before {
    @include sizing($sizing: content-box);
    display: block;
    position: absolute;
    content: "";
    top: 0;
    left: calc(100% - 10em);
    border-bottom: 50em solid $color;
    height: 100%;
    width: 80em;
    background: #fff;
    z-index: 1;
    @include skewX(-15deg);
    @include backface-visibility();
  }
}

* {
  &,
  &:before,
  &:after {
    @include sizing();
  }
}

html { padding: 2em; overflow: scroll; }

h2 {
  font: 900 33px/1.09 "Open Sans", sans-serif;
  font-style: italic;
  text-transform: uppercase;
  margin-top: 0;
}

.c-box {
  position: relative;
  background: #000;
  color: #fff;
  padding: 0;
  margin-bottom: 18px;
  overflow: hidden;
  
  &__figure {
    margin: 0;
    padding-right: 12px;
    display: block;
    background: #fff;
    /* overflow: hidden; */
    
    /* @media (min-width: 544px) {
      max-width: 80%;
    } */
  }
  
  &__img {
    position: relative;
    @include slant();
    
    & img {
      display: block;
      width: 100%;
    }
    
  }
  
  &__fill {
    position: absolute;
    top: 0;
    bottom: 18px;
    left: 0;
    right: 0;
    background: #009ee0;
  }
  
  &__outer {
    width: 100%;
    padding: 24px;
    background: #000;
    font: 16px/1.4 Arial, sans-serif;
  }
  
  &__inner {
    position: relative;
    z-index: 2;
  }
  
}

/* .c-box {
  &--blue {
    background: #007eb3;
    
    & .c-box__img:before {
      background: #007eb3;
      border-bottom-color: #007eb3;
    }
    
    & .c-box__text {
      background: rgba(0, 126, 179, .6);
    }
  }
} */