<div class="card"></div>
html,
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
.card {
  background-color: #efefef;
  height: 170px;
  width: 210px;
  border-radius: 20px;
  background-image: linear-gradient(90deg, #d5493c 17%, transparent 17%),
    linear-gradient(90deg, transparent 83%, #d5493c 83%),
    linear-gradient(145deg, #e3e3e390 60%, transparent 50%),
    linear-gradient(-134deg, #e8e8e8 60%, transparent 50%);
  position: relative;
  overflow: hidden;
}

.card::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  top: -78%;
  left: -15%;
  box-shadow: 1px 1px 5px #000;
  background-color: #f2f2f2;
  border-right: 30px solid #d5493c;
  border-bottom: 30px solid #d5493c;
  transform: rotate(51deg) skewY(-12deg);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.