<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%);
}
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.