<div class="container">
  <div class="item item--1">Div</div>
</div>
.container {
  padding: 15px;
  margin: 0 auto;
}

.item {
  height: 320px;
  margin-bottom: 32px;
  padding: 20px;
  border-radius: 15px;
  filter: drop-shadow(0px 0px 2px #000);
}
.item--1 {
  width: 90%;
  margin: 0 auto;
  background-image:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='176'%3E%3Cpath d='M15 0C6.71573 0 0 6.71573 0 15V73C0 81.2843 6.71573 88 15 88H285C293.284 88 300 94.7157 300 103V161C300 169.284 306.716 176 315 176H585C593.284 176 600 169.284 600 161V15C600 6.71573 593.284 0 585 0H15Z' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(0deg, transparent 0%, transparent 70%, #fff 71%);
  background-size: 100%, 100%;
  background-repeat: no-repeat;
  background-position: center bottom;
}
   @media (max-width: 1100px) {
    .item--1 {
       background-image:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='176'%3E%3Cpath d='M15 0C6.71573 0 0 6.71573 0 15V73C0 81.2843 6.71573 88 15 88H285C293.284 88 300 94.7157 300 103V161C300 169.284 306.716 176 315 176H585C593.284 176 600 169.284 600 161V15C600 6.71573 593.284 0 585 0H15Z' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(0deg, transparent 0%, transparent 50%, #fff 51%);
     }
   }
   @media (max-width: 800px) {
    .item--1 {
       background-image:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='176'%3E%3Cpath d='M15 0C6.71573 0 0 6.71573 0 15V73C0 81.2843 6.71573 88 15 88H285C293.284 88 300 94.7157 300 103V161C300 169.284 306.716 176 315 176H585C593.284 176 600 169.284 600 161V15C600 6.71573 593.284 0 585 0H15Z' fill='%23fff'/%3E%3C/svg%3E"),
    linear-gradient(0deg, transparent 0%, transparent 30%, #fff 31%);
     }
   }

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.