Геометрическая фигура на HTML/CSS

html,body{ 
  height:100%; 
  margin:0; 
  padding:0; 
}

<svg xmlns="http://www.w3.org/2000/svg" version="1.1"  version="1.1" 
viewBox="0 0 600 350"> 
        <pattern id="img1" patternUnits="userSpaceOnUse" width="1200px" height="600px"> 
            <image class='twombly' xlink:href="http://henlulu02.com/wp-content/uploads/2017/02/tesla.png" x="-200px" y="-100px" 
                width="1200px" height="600px" /> 
        </pattern> 
   
    <filter id="blur" x="0" y="0" x2="0%" y2="10px"> 
      <feGaussianBlur in="SourceGraphic" stdDeviation="6" /> 
    </filter> 
 
 
     <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="30%"> 
      <stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:0.1" /> 
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1" /> 
    </linearGradient> 
 
   
  <polygon points="300,350 0,200 0,0 600,0 600,200"; style="fill:url(#img1);"/> 
 
  <polygon points="300,300 0,150 600,150" style="fill:url(#grad2);transform:translate(0,50px);" filter="url(#blur)"/> 
   
</>

.triangle { 
  width: 500px; 
  height: 200px; 
  background: #20a3bf; 
  position: relative; 
} 
 
.triangle:after { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: 100%; 
  width: 0; 
  height: 0; 
  border-top: 50px solid #20a3bf; 
  border-left: 250px solid transparent; 
  border-right: 250px solid transparent; 
} 
 
.square { 
  width: 500px; 
  height: 200px; 
  margin-top: 70px; 
  background: #20a3bf; 
  position: relative; 
} 
 
.square:before { 
  content: ''; 
  position: absolute; 
  left: 0; 
  top: -50px; 
  width: 0; 
  height: 0; 
  border-bottom: 50px solid #20a3bf; 
  border-right: 250px solid transparent; 
} 
 
.square:after { 
  content: ''; 
  position: absolute; 
  right: 0; 
  top: -50px; 
  width: 0; 
  height: 0; 
  border-bottom: 50px solid #20a3bf; 
  border-left: 250px solid transparent; 
}

<div class="triangle"></div> 
<div class="square"></div>