【背景】背景を斜めに区切る【CSS】

.section {
  overflow: hidden;
}
.section1{
  position: relative;
  height: 300px;
  width: 100%;
  background-color: #ff0000;  /* 赤 */
}
.section1::after {
  content: '';
  display: block;
  position: absolute;
  left:0;
  bottom: 0;
  border-top: 60px solid transparent;  /* 透明 */ 
  border-left: 50vw solid transparent;  /* 透明 */ 
  border-right: 50vw solid #000000;  /* 黒 */ 
  border-bottom: 60px solid #000000;  /* 黒 */ 
}

 

※角度維持

@media only screen and (max-width: 1900px) {
  .section1::after {
    border-left: 950px solid transparent;  
    border-right: 950px solid #8B3DC5;  
  }
}