Div with pointy side

by GCcode

HTML

<div class="triangle-down">
  <img src="http://placehold.it/180x105">
</div>

CSS

/*Down pointing*/
.triangle-down {
  background: white;
  display: inline-block;
  height: 125px;
  margin-left: 20px;
  margin-bottom: 55px;
  position: relative;
  width: 200px;
  cursor: pointer;
  border: red solid 2px;
}

img {
  margin: 10px;
}

.triangle-down:before {
  border-top: 20px solid red;
  border-left: 101px solid transparent;
  border-right: 101px solid transparent;
  content: "";
  height: 0;
  left: -1px;
  position: absolute;
  top: 127px;
  width: 0;

}

.triangle-down:after {
  border-top: 20px solid white;
  border-left: 100px solid transparent;
  border-right: 100px solid transparent;
  content: "";
  height: 0;
  left: 0;
  position: absolute;
  top: 125px;
  width: 0;
}