<section>
  <div>
    <h4>polygon(50% 0%, 0% 100%, 100% 100%)</h4>
    <div class="box triangle"></div>
  </div>
  <div>
    <h4>polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)</h4>
    <div class="box rhombus"></div>
  </div>
  <div>
    <h4>polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)</h4>
    <div class="box parallelogram"></div>
  </div>
</section>

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
section {
  padding: 2vw;
  display: flex;
  gap: 2vw;
  flex-wrap: wrap;
  justify-content: center;
}
section > div {
  background-color: #eeeeee;
  position: relative;
  margin-top: 40px;
}
.box {
  width: 250px;
  height: 250px;
  background-image: url('https://fruntend.com/storage/photos/1/sunflowers.jpg');
  background-repeat: no-repeat;
}
.triangle {
  clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}
.rhombus {
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
}
.parallelogram {
  clip-path: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
}
h4 {
  font-family: sans-serif;
  text-align: center;
  margin-bottom: 1vw;
  position: absolute;
  bottom: 100%;
  left: 0;
  right: 0;
}