Angled Bottom DIV

by pphheerroonn

HTML

<div class='box'>
<p>
Hello
</p>
<p>
Hello
</p>
</div>

CSS

.box {
  background: red;
  color: #fff;
  position: relative;
  z-index: 1;
}
.box:after {
  background: inherit;
  bottom: 0;
  content: '';
  display: block;
  height: 100vw;
  left: 0;
  position: absolute;
  right: 0;
  transform: skewY(-10.5deg);
  transform-origin: 100%;
  z-index: -1;
}