<div class="box">
<svg width="100%" height="100%" viewBox="0 0 254 187" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M40.522 29.5885C46.809 12.1352 63.3672 0.5 81.9183 0.5H235C245.493 0.5 254 9.00659 254 19.5V167.5C254 177.993 245.493 186.5 235 186.5H39.5016C12.4869 186.5 -6.34571 159.699 2.80952 134.283L40.522 29.5885Z" fill="#C4C4C4" />
</svg>
<div class="box-content">
<h1>Search Data</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Exercitationem nostrum provident accusantium sit eligendi, ducimus eius dolor asperiores. Necessitatibus rerum molestiae cumque ipsam a voluptatem at! Tenetur ad harum temporibus.</p>
<a href="">lorem more</a>
</div>
</div>
.box {
width: 400px;
height: 318px;
position:relative;
padding-left:20px;
}
.box svg {
z-index: -1;
position: absolute;
}
.box-content {
padding: 20px 0px 20px 140px;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.