Реально ли сделать такой фон без подгрузки изображения?

* { 
    padding: 0; 
    margin: 0; 
    box-sizing: border-box; 
} 
 
section { 
    min-height: 100px; 
    background: #fff; 
    position: relative; 
} 
section:nth-of-type(2) { 
    background: #F5F5F5; 
    padding-top: 70px; 
    text-align: center; 
} 
section:nth-of-type(2):before, 
section:nth-of-type(2):after{ 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    border-style: solid; 
} 
section:nth-of-type(2):before {    
    border-width: 50px 50vw 0 50vw; 
    border-color: #fff transparent transparent transparent;     
} 
section:nth-of-type(2):after{     
    border-width: 50px 0 50px 50vw; 
    border-color: transparent transparent transparent #F9F9F9; 
}

<section></section> 
<section> 
    <h2>Title</h2> 
</section>

.tr{ 
	width: 50%; 
	height: 0; 
	padding-left: 25%; 
	padding-top: 25%; 
	overflow: hidden; 
} 
.tr div { 
	width: 0;  
	height: 0; 
	margin-left:-500px; 
	margin-top:-500px; 
	 
	border-left: 500px solid transparent; 
	border-right: 500px solid transparent; 
	border-top: 500px solid #4679BD; 
}

<div class = "tr"> 
  <div></div> 
</div>