2.右側加上斜角圖形

(1) 利用【:before】加入

/* 右側加上斜角圖形 */

.imgBox::before{
  content: ""; width: 0; height: 0;
  display: inline-block;
  border-right:100px solid transparent;
  border-top:400px solid red;
}

(2)調整兩區塊的大小相同

右側加上斜角圖形的 border-right:100px;故兩方各加減一半
/* 右側加上斜角圖形的 border-right:100px;故兩方各加減一半 */
.textBox{
  background: #f7e57c;
  /* width:50%; */
  width: calc(50% - 50px); /* 調整 */
}
.imgBox{
  background: #59cece;
  /* width:50%; */
  width: calc(50% + 50px); /* 調整 */
}

最後再調整色塊