<div class="card">
  <div class="card__btn-close">
    <div class="card__icon-close"></div>
  </div>
  <div class="card__content">
    Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quibusdam et, illo ipsum vel magni consequatur delectus? Voluptate, sunt itaque? Mollitia amet eligendi voluptas cum, hic voluptates at voluptatum eos quae.
  </div>
</div>

body {
  background-color: #eae9ee;
  font-family: sans-serif;
  line-height: 1.35;
}

.card {
  margin: 30px;
  width: 35%;
  position: relative;
  z-index: 0;
  transition: filter 250ms;
}

.card__btn-close {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 100%);
  width: 80px;
  height: 20px;
  z-index: -1;
  cursor: pointer;
  transition: transform 250ms;
}

.card:hover .card__btn-close {
  transform: translate(-50%, 0);
}

.card:hover {
  filter: drop-shadow(0 0 5px rgba(48, 48, 52, 0.35));
}

.card__btn-close::before,
.card__btn-close::after {
  content: '';
  position: absolute;
  width: 50%;
  height: 100%;
  background-color: #fff;
  z-index: -1;
}

.card__btn-close::before {
  left: 0;
  transform: skewX(-21deg);
  transform-origin: 0 100%;
  border-radius: 10px 0 0 0;
}

.card__btn-close::after {
  right: 0;
  transform: skewX(21deg);
  transform-origin: 100% 100%;
  border-radius: 0 10px 0 0;
}

.card__icon-close {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('https://fonts.gstatic.com/s/i/materialicons/close/v8/24px.svg') no-repeat center / 20px;
}

.card__content {
  padding: 15px;
  border-radius: 15px;
  background-color: #fff;
  background: url('https://images.unsplash.com/photo-1515002246390-7bf7e8f87b54?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=750&q=80') no-repeat center / cover;
}