Effet de biais sur un bloc avec 2 photos

by oilvier

HTML

<div class="foo">
  <div class="bar">
    <div>
      <h2>Nos actualités</h2>
      <p>Texte</p>
    </div>
  </div>
  <div class="baz">
    <div>
      <h2>Les avis clients</h2>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
      <p>Texte</p>
    </div>
  </div>
</div>

SCSS

body {font-family:sans-serif;}
h2 {font-size: 1.5em; font-weight: bold;}


.foo {display:flex; overflow: hidden;}

.bar,
.baz {flex:1 1 0%; padding:20px; position:relative; z-index:1;
  &:before,
  &:after {content:""; position: absolute; top:0; left:0; right:0; bottom:0; background-size:cover; background-position:center center; z-index: -1;}
}

.bar {background-color:crimson; color:white; margin:10px 0;
   &:before {background-image:url(//lorempixel.com/output/abstract-q-c-640-480-8.jpg);}
   &:after {background-color:red; opacity: 0.5;}
}

.baz {background-color:navy; color:white; margin:0 -20px; transform:skew(-10deg); overflow: hidden;
  &:before {background-image:url(//lorempixel.com/output/city-q-c-640-480-10.jpg); transform:skew(10deg); margin:0 -20px;}
  &:after {background-color:black; opacity: 0.5;}
  & > div {transform:skew(10deg); padding-left:20px;}
}