<div class="triangle">
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_43.jpg" alt="" />
  </div>
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_43.jpg" alt="" />
  </div>
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_43.jpg" alt="" />
  </div>
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_31.jpg" alt="" />
  </div>
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_31.jpg" alt="" />
  </div>
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_31.jpg" alt="" />
  </div>
  <div class="triangle__box">
    <img src="http://ewigkeit.ucoz.club/filterImage/userpic_31.jpg" alt="" />
  </div>
</div>
.triangle {
  max-width: 1200px;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(4, 1fr);
  grid-gap: 20px;
  margin-top: 50px;
}

.triangle__box {
  grid-column: span 2;
  position: relative;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  margin-bottom: -52%;
}
.triangle__box:nth-child(7n + 1) {
  grid-column: 2 / span 2;
}

.rhomb img {
  max-width: 100%;
}

External CSS

  1. https://moonpresence.site/moonpresence/foundation/css/base.css

External JavaScript

This Pen doesn't use any external JavaScript resources.