clip-pathプロパティを利用して、高さを可変の三角形と矢印を作成します。
デモページはこちら

まず共通のCSSです。clip-pathはdivタグの疑似要素に指定します。注意点としてbackground-colorはdivの疑似要素側に指定します。親要素であるdivに指定するとうまくいきません。

.div-parent {
  position: relative;
  z-index: 1;
  margin: 0 0 1em;
  color: #fff;
}
.div-parent::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  background-color: #1563ad;
}

三角形を作成する場合、clip-pathのpolygonは台形になるため、座標の指定は4つです。

.style01 {
  padding: 40px 40px 40px 70px;
}
.style01::after {
  clip-path: polygon(60px 0, 100% 0, 100% 100%, 0 100%);
}
.style02 {
  padding: 40px 70px 40px 40px;
}
.style02::after {
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 100%, 0 100%);
}

矢印を作成する場合、clip-pathのpolygonは五角形になるため、座標の指定は5つです。

.style03 {
  padding: 40px 40px 40px 70px;
}
.style03::after {
  clip-path: polygon(60px 0, 100% 0, 100% 100%, 60px 100%, 0 50%);
}
.style04 {
  padding: 40px 70px 40px 40px;
}
.style04::after {
  clip-path: polygon(0 0, calc(100% - 60px) 0, 100% 50%, calc(100% - 60px) 100%, 0 100%);
}