CSS triangle

clip-path

by akogch

HTML

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

CSS

.triangle {
  background: #004474;
  height: 250px;
  width: 300px;
  display: block;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  background-image: url(https://placeimg.com/640/480/tech/grayscale);
  background-size: cover;
  background-position: center;
}