transformプロパティのskewで写真を傾斜変形させます。単純に傾斜変形させるだけでは写真がゆがみ左右がコンテンツの外側にはみ出してしまうので、それも調整します。
デモページはこちら

htmlは以下のように準備して確認します。

<p>divを入れ子にして内側のdivに背景画像をbackground-size: cover;で配置</p>
<div class="bg-01"><div class="bg-img-01"></div></div>

<p>外側のdivにtransform: skew(45deg);を設定</p>
<div class="bg-02"><div class="bg-img-02"></div></div>

<p>外側のdivにwidth: 66.67%;を設定</p>
<div class="bg-03"><div class="bg-img-03"></div></div>

<p>内側のdivにtransform: skew(-45deg);を設定</p>
<div class="bg-04"><div class="bg-img-04"></div></div>

<p>外側のdivにoverflow: hidden;を設定</p>
<div class="bg-05"><div class="bg-img-05"></div></div>

<p>内側のdivにtransform: skew(-45deg) scale(1.5);を設定</p>
<div class="bg-06"><div class="bg-img-06"></div></div>

まず、傾斜変形させる前の状態です。divを入れ子にして内側のdivに背景画像をbackground-size: cover;で配置します。

.bg-01 {
	margin: 0 0 1em;
	position: relative;
}
.bg-01::before {
	content: "";
	display: block;
	padding-top: 50%;
}
.bg-img-01 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/image01.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

次に、外側のdivにtransform: skew(45deg);を設定し傾斜変形させます。skew(X軸の傾斜角度, Y軸の傾斜角度);で指定しますが、Y軸の傾斜角度は省略可能です。そのためskew(45deg);はskewX(45deg);と同じです。ただし、単純に傾斜変形しただけでは写真がゆがみ、左右にはみ出してしまいます。

.bg-02 {
	margin: 0 0 1em;
	position: relative;
	transform: skew(45deg);
}
.bg-02::before {
	content: "";
	display: block;
	padding-top: 50%;
}
.bg-img-02 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/image01.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

そこで、外側のdivにwidth: 66.67%;を設定して横幅を調整します。この時、max-widthの指定では横幅を制御できません。また、margin: 0 auto 1em;を指定して中央寄せにします。

.bg-03 {
	width: 66.67%;
	margin: 0 auto 1em;
	position: relative;
	transform: skew(45deg);
}
.bg-03::before {
	content: "";
	display: block;
	padding-top: 50%;
}
.bg-img-03 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/image01.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
}

写真のゆがみは内側のdivにtransform: skew(-45deg);を設定することで解消できます。ただし、このままでは外側のdivの傾斜変形が適用されません。

.bg-04 {
	width: 66.67%;
	margin: 0 auto 1em;
	position: relative;
	transform: skew(45deg);
}
.bg-04::before {
	content: "";
	display: block;
	padding-top: 50%;
}
.bg-img-04 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/image01.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: skew(-45deg);
}

そこで、外側のdivにoverflow: hidden;を設定して内側のdivをマスクします。

.bg-05 {
	width: 66.67%;
	margin: 0 auto 1em;
	position: relative;
	transform: skew(45deg);
	overflow: hidden;
}
.bg-05::before {
	content: "";
	display: block;
	padding-top: 50%;
}
.bg-img-05 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/image01.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: skew(-45deg);
}

しかしこのままでは写真が傾斜変形内におさまらず、写真の左右が切れてしまいます。そこで、内側のdivにtransform: skew(-45deg) scale(1.5);を設定します。傾斜変形内に写真を全ておさめるには、写真の拡大が必要です。

.bg-06 {
	width: 66.67%;
	margin: 0 auto 1em;
	position: relative;
	transform: skew(45deg);
	overflow: hidden;
}
.bg-06::before {
	content: "";
	display: block;
	padding-top: 50%;
}
.bg-img-06 {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-image: url("../img/image01.jpg");
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	transform: skew(-45deg) scale(1.5);
}