<div class="box blue skewx-45deg">
  <div class="skewx-minus45deg">There may be really long content in this block. For example, an entire article or news item.</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;
  margin-right: 20px;
  padding: 20px;

  color: #fff;
}

.red {
  background: #ef5350;
}

.green {
  background: #66bb6a;
}

.blue {
  background: #42a5f5;
}

.skewx-45deg {
  transform: skewX(45deg);
}

.skewx-minus45deg {
  transform: skewX(-45deg);
}