<div class="flex-container-cards">
  
  <div class="card">
    <div class="card-img-shadow"><img src="https://variety.com/wp-content/uploads/2022/05/SRV-12030_R.jpg" alt="wanda"></div>
    <div class="card-content">
      <h2> Scarlet Witch</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum consectetur commodi, ducimus ipsam tenetur tempore?</p>
      <div class="button-shadow">
        <div class="card-button">View More </div>
      </div>
    </div>
  </div>

  <div class="card">
    <div class="card-img-shadow"><img src="https://free4kwallpapers.com/uploads/originals/2017/01/30/agent-natasha-romanoff-wallpaper.jpg" alt="natasha"></div>
    <div class="card-content">
      <h2>Black Widow</h2>
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum consectetur commodi, ducimus ipsam tenetur tempore?</p>
      <div class="button-shadow">
        <div class="card-button">View More </div>
      </div>
    </div>
  </div>
  
  <div class="card">
    <div class="card-img-shadow"><img src="https://estaticos-cdn.sport.es/clip/76d5c74a-111d-4482-896f-4910500d901b_media-libre-aspect-ratio_default_0.jpg" alt="thor"></div>
    <div class="card-content">
      <h2> Mighty Thor</h2>
      <p> Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam rerum consectetur commodi, ducimus ipsam tenetur tempore? .</p>
      <div class="button-shadow">
        <div class="card-button">View More </div>
      </div>
    </div>
  </div>
  
</div>
@import url("https://fonts.googleapis.com/css2?family=Jost:wght@300;400;500;600;700;800;900&display=swap");

* {
  box-sizing: border-box;
  margin: 0px;
  padding: 0px;
  font-family: "Jost", sans-serif;
}

body {
  padding: 60px 20px;
  color: rgb(211, 211, 211);
  background: rgb(12,12,12);
}

p{
  margin: 10px 0px;
  letter-spacing: 2px;
}

.flex-container-cards {
  filter: drop-shadow(rgb(255, 100, 0) 0px 0px 1px);
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: center;
  align-items: center;
}

.flex-container-cards .card {
  background: linear-gradient(240deg, rgba(0,0,0,1) 0%, rgba(36,36,36,1) 100%);
  width: 300px;
  -webkit-clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
          clip-path: polygon(0 0, 200px 0, 210px 10px, 280px 10px, 290px 0, 100% 0, 100% 150px, 290px 160px, 290px 300px, 100% 310px, 100% calc(100% - 30px), calc(100% - 30px) 100%, 0 100%, 0 400px, 10px 390px, 10px 100px, 0 90px);
  transition: all 0.2s linear;
  filter: drop-shadow(rgb(255, 0, 0) 0px 0px 10px);
}
.flex-container-cards .card:hover {
  transform: scale(1.1);
}
.flex-container-cards .card .card-img-shadow {
  filter: drop-shadow(rgb(255, 0, 0) 0px 0px 10px);
}
.flex-container-cards .card .card-img-shadow img {
  width: 100%;
  height: 170px;
  object-fit: cover;
  margin-bottom: 30px;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
          clip-path: polygon(0 0, 100% 0, 100% 100%, 30px 100%, 0 calc(100% - 30px));
}
.flex-container-cards .card .card-content {
  margin: 0px 30px;
}
.flex-container-cards .card h2 {
  color: rgb(255, 128, 0);
  text-align: center;
}
.flex-container-cards .card .button-shadow {
  filter: drop-shadow(rgb(255, 64, 0) 0px 0px 5px);
  transition: all 0.2s ease-in;
}
.flex-container-cards .card .button-shadow:hover {
  filter: drop-shadow(rgb(255, 64, 0) 0px 0px 10px);
}
.flex-container-cards .card .button-shadow .card-button {
  text-align: center;
  margin: 20px 0px;
  padding: 10px 0px;
  background: linear-gradient(45deg, rgb(255, 30, 0) 0%, rgb(255, 89, 0) 100%);
  -webkit-clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
          clip-path: polygon(0 0, 100% 0%, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%);
  color: black;
  font-weight: 600;
  transition: all 0.2s ease-in;
}
.flex-container-cards .card .button-shadow .card-button:hover {
  color: white;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.