Вёрстка блока с 2-мя треугольниками

.d1 { 
height: 300px;  
width: 300px;  
margin: 35px 20px 0 0; 
background: green; 
position: relative; 
} 
 
.d1:before { 
content: ""; 
height: 0;  
width: 0; 
position: absolute; 
top: 0; 
right: -100px; 
border-left: 100px solid green; 
border-top: 150px solid transparent; 
border-bottom: 150px solid transparent; 
} 
 
.d2 { 
height: 0;  
width: 0; 
background: red; 
position: relative; 
} 
 
.d2:before { 
content: ""; 
height: 0;  
width: 0; 
position: absolute; 
top: 0; 
left: 280px; 
border-left: 100px solid red; 
border-top: 150px solid transparent; 
border-bottom: 150px solid transparent; 
} 
 
.d2:after { 
content: ""; 
height: 0;  
width: 0; 
position: absolute; 
top: 0; 
left: 260px; 
border-left: 100px solid green; 
border-top: 150px solid transparent; 
border-bottom: 150px solid transparent; 
} 
 
.d3:before { 
content: ""; 
height: 30px;  
width: 100px; 
position: absolute; 
top: 0; 
left: 200px; 
background: green; 
} 
 
.d3:after{ 
content: ""; 
height: 30px;  
width: 100px; 
position: absolute; 
bottom: 0; 
left: 200px; 
background: green; 
}

<div class="d1"> 
  <div class="d2"> 
  </div> 
  <div class="d3"> 
  </div> 
</div>