borderプロパティで三角形を作成した場合、高さを可変にすることができません。そこで、background-imageプロパティのlinear-gradient（線形グラデーション）を利用して、高さ可変の三角形を作成します。
デモページはこちら

CSSはdivタグの疑似要素に指定します。width: 60px;、height: 100%;、background-size: 100% 100%;を指定することで、ボックス内のテキスト量の増減に合わせて三角形の高さのみが可変します。

三角形はposition: absolute;で配置します。左寄せの三角形はleft: 0;を指定します。

.div01 {
	position: relative;
	margin: 0 0 1em;
	padding: 40px 40px 40px 70px;
	background-color: #1563ad;
	color: #fff;
}

.div01::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 60px;
	height: 100%;
	background: no-repeat top left/100% 100%;
	background-image: linear-gradient(to top left, transparent 50%, #f2f2f2 50.5%);
}

右寄せの三角形はright: 0;を指定します。background-imageプロパティはbackgroundプロパティにショートハンドで記述することができます。

.div02 {
	position: relative;
	margin: 0 0 1em;
	padding: 40px 70px 40px 40px;
	background-color: #1563ad;
	color: #fff;
}

.div02::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	display: block;
	width: 60px;
	height: 100%;
	background: linear-gradient(to top right, transparent 50%, #f2f2f2 50.5%) no-repeat top left/100% 100%;
}