<svg style="position: absolute; width: 0; height: 0; z-index: -9999">
  <symbol id="rounded-shape" overflow="visible">
    <defs>
      <clipPath id="clip" clipPathUnits="objectBoundingBox">
        <polygon
          points="
            0.00, 0.00
            1.00, 0.12
            0.95, 1.00
            0.07, 1.0"
        />
      </clipPath>
    </defs>
    
    <rect clip-path="url(#clip)" width="100%" height="100%"/>
    
    <g stroke-linecap="round">
      <line x1="0" y1="0" x2="100%" y2="12%" />
      <line x1="100%" y1="12%" x2="95%" y2="100%"/>
      <line x1="95%" y1="100%" x2="7%" y2="100%"/>
      <line x1="7%" y1="100%" x2="0" y2="0"/>
    </g>
  </symbol>
</svg>

<div class="grid">
  <div class="grid__item">
    <svg class="grid__bg"><use xlink:href="#rounded-shape"/></svg>
    <div class="grid__content">Lorem ipsum dolor sit amet consectetur adipisicing elit. Soluta ullam ab aspernatur modi</div>
  </div>
  <div class="grid__item">
    <svg class="grid__bg"><use xlink:href="#rounded-shape"/></svg>
    <div class="grid__content">Soluta ullam ab aspernatur modi, vero aperiam</div>
  </div>
  <div class="grid__item">
    <svg class="grid__bg"><use xlink:href="#rounded-shape"/></svg>
    <div class="grid__content">Eaque vero nostrum dolorum necessitatibus voluptatibus, tenetur praesentium inventore ut, nihil vel</div>
  </div>
</div>

body {
  font-family: sans-serif;
  line-height: 1.45;
  color: #fff;
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 60px;
  padding: 30px;
}

.grid__item {
  display: grid;
  place-content: center;
  position: relative;
  filter: drop-shadow(2px 4px 6px rgba(0, 0, 0, 0.5));
}

.grid__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  fill: #4caf50;
  stroke: #4caf50;
  stroke-width: 60px;
  z-index: -1;
  overflow: visible;
}

.grid__content {
  margin: auto;
}