JSFiddle - React, Tailwind, and code Playground

by Susan Delgado

HTML

<header>
  <h1>
  https://viget.com/inspire/angled-edges-with-css-masks-and-transforms
  </h1>
  <div class="col">
    <div class="box">
    </div>
    <div class="box1">
    </div> 
   <!--  <div class="box">
    </div>
    <div class="box1">
    </div>
    <div class="box">
    </div>
    <div class="box1">
    </div>
    <div class="box">
    </div>
    <div class="box1">
    </div>
    <div class="box">
    </div>
    <div class="box1">
    </div> -->
  </div>

</header>

CSS

body{
  background:#ddd;
}
header {
  color: #fff;
  width: 100%;
  /* background-color: #582879; */
  height: 520px;
  padding-top:100px;
}
h1{
  position:absolute;
  z-index:99;
  top:0;
}
.col{
  /* position:relative; */
  width:202px;
  height:278px;
  background:blue;
}
.box {
  position:relative;
  /* display:inline; */
  width: 75px;
  height: 178px;
  /* background:blue; */
  /* margin: 0 0px 75px 0; */
  color: #fff;
  position: relative;
  z-index: 1;
/*   height: 88px;
  width: 75px; */
}

.box:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 55px;
  left: 0;
  position: absolute;
  right: 0;
  background: #552277;
  transform: skewY(-145deg);
  transform-origin: 100%;
  z-index: -1;
}

.box:before {
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 55px;
  left: 0;
  background: #582879;
  position: absolute;
  right: 0;
  transform: skewY(145deg);
  transform-origin: 100%;
  z-index: -1;
}
.box1 {
  position:relative;
  /* display:inline; */
  width: 75px;
  height: 178px;
  /* margin: 0 75px 75px 0; */
  color: #fff;
  position: relative;
  z-index: 1;
  height: 88px;
  width: 75px;
}

.box1:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 55px;
  left: 0;
  position: absolute;
  right: 0;
  background: #5b2e7c;
  transform: skewY(-45deg);
  transform-origin: 100%;
  z-index: -1;
}

.box1:before {
  background: inherit;
  top: 0;
  content: '';
  display: block;
  height: 55px;
  left: 0;
  background: #5f337f;
  position: absolute;
  right: 0;
  transform: skewY(45deg);
  transform-origin: 100%;
  z-index: -1;
}