title: Crop a triangle from image and place it below the original image CSS
body: <p>I am trying to achieve this effect using HTML/CSS:</p>
  
  <p><img src="https://i.stack.imgur.com/ClmfQ.png" alt="enter image description here"></p>
  
  <p>What I have until now is this 
     <a href="http://jsfiddle.net/zxq91ok0/" rel="nofollow noreferrer">http://jsfiddle.net/zxq91ok0/</a></p>
  
  <pre><code>.wrap {
  position: relative;
  overflow: hidden;
  width: 100%;
  height:250px;
  margin: 0 auto;
  background-color:#B2C2CC;
  }
  .wrap img {
  width: 100%;
  height: auto;
  display: block;
  }
  .wrap:before, .wrap:after {
  content:'';
  position: absolute;
  bottom: 0;
  width: 50%;
  background-color: inherit;
  padding-bottom:3%;
  }
  .wrap:before {
  right: 50%;
  -ms-transform-origin: 100% 100%;
  -webkit-transform-origin: 100% 100%;
  transform-origin: 100% 100%;
  -ms-transform: skewX(45deg);
  -webkit-transform: skewX(45deg);
  transform: skewX(45deg);
  }
  .wrap:after {
  left: 50%;
  -ms-transform-origin: 0 100%;
  -webkit-transform-origin: 0 100%;
  transform-origin: 0 100%;
  -ms-transform: skewX(-45deg);
  -webkit-transform: skewX(-45deg);
  transform: skewX(-45deg);
  }
  </code></pre>
  
  <p>The problem I face is that instead of plain background color I have another image as a background so I can't figure out how to get rid of the light blue background.</p>
  
  <p>Can you help me accomplish the effect shown on the first image?
  Thanks!</p>