JSFiddle - React, Tailwind, and code Playground

by Sergey Goryachev

HTML

<div class="white-gray">
  <div class="wrapper">
    <div class="block block--white"></div>
    <div class="block block--gray"></div>
    <div class="clearfix"></div>
  </div>
</div>
<div class="gray-white">
  <div class="wrapper">
    <div class="block block--gray"></div>
    <div class="block block--white"></div>
    <div class="clearfix"></div>
  </div>
</div>

CSS

.clearfix {
  float: none;
  clear: both;
}
.wrapper {
  width: 80%;
  background: gray;
  margin: auto;
}
.white-gray {
  background: rgb(255,255,255);
  background: -moz-linear-gradient(left,  rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(128,128,128,1) 50%, rgba(128,128,128,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(128,128,128,1) 50%,rgba(128,128,128,1) 100%);
  background: linear-gradient(to right,  rgba(255,255,255,1) 0%,rgba(255,255,255,1) 50%,rgba(128,128,128,1) 50%,rgba(128,128,128,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#808080',GradientType=1 );
}
.gray-white {
  background: rgb(128,128,128);
  background: -moz-linear-gradient(left,  rgba(128,128,128,1) 0%, rgba(128,128,128,1) 50%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 100%);
  background: -webkit-linear-gradient(left,  rgba(128,128,128,1) 0%,rgba(128,128,128,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
  background: linear-gradient(to right,  rgba(128,128,128,1) 0%,rgba(128,128,128,1) 50%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#808080', endColorstr='#ffffff',GradientType=1 );
}
.block {
  width: 50%;
  height: 250px;
  position: relative;
  float: left;
  z-index: 1;
}
.block--white {
  background: white;
}
.block--gray {
  background: gray;
}
.white-gray .block--white:after {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 50px 50px;
  border-color: transparent transparent gray transparent;
  right: 0;
  bottom: 0;
  z-index: 2;
}
.white-gray .block--gray:before {
  content: '';
  position: absolute;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 50px 50px 0 0;
  border-color: white transparent transparent transparent;
  left: 0;
  top: 0;
  z-index: 2;
}