<div class="box blue skewx-45deg">

  <div class="skewx-minus45deg">skewX(45deg)</div>

</div>

body {

  display: flex;

  align-items: center;

  justify-content: center;

​

  height: 100vh;

  margin: 0;

  overflow: hidden;

​

  font-family: sans-serif;

}

​

.box {

  box-sizing: border-box;

  width: 300px;

  height: 100px;

  margin-right: 20px;

  padding: 20px;

​

  color: #fff;

  text-align: center;

}

​

.red {

  background: #ef5350;

}

​

.green {

  background: #66bb6a;

}

​

.blue {

  background: #42a5f5;

}

​

.skewx-45deg {

  transform: skewX(45deg);

}

​

.skewx-minus45deg {

  transform: skewX(-45deg);

}