Rounded clip path div [duplicate]

Question

I need to create custom shapes for a client project. They are expecting responsive rounded divs. For that, we try using clip path in combination with svg filter to round the edges.

Figma file expectations:

However, I can't make this thing work. What are workarounds that I can try to make this thing nice and responsive while having a complex shape?

Also, note that the edges are cut off by the filter...

Here is the code I currently have that provides the best looking results :

.shape-14 {
  position: relative;
  background: #000000;
  width: 33%;
  height: 100%;
  min-height: 370px;
  clip-path: polygon(0 0, 128px 0, 128px 104px, 100% 104px, 100% 100%, 0 100%, 0 0);
}

.shape-14::before {
  content: '';
  width: calc(100% - 8px);
  height: calc(100% - 8px);
  background: #FDEEE1;
  display: block;
  position: absolute;
  top: 4px;
  left: 4px;
  clip-path: polygon(0 0, 120px 0, 120px 104px, 100% 104px, 100% 100%, 0 100%, 0 0);
}

.shape-14-wrapper {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  align-items: stretch;
  display: flex;
}

.css-shape-blur {
  filter: url('data:image/svg+xml,\
      <svg xmlns="http://www.w3.org/2000/svg">\
      <filter id="corners">\
      <feGaussianBlur in="SourceGraphic" stdDeviation="5" />\
      <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0  0 1 0 0 0  0 0 1 0 0  0 0 0 22 -16" />\
      <feComposite in="SourceGraphic" in2="corners" operator="in"/>\
  </filter>\
  </svg>#corners')
}

<div class="css-shape-blur">
  <div class="shape-14-wrapper">
    <div class="shape-14">
      <p class="p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
      </p>
    </div>
    <div class="shape-14">
      <p class="p-card">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.
      </p>
    </div>
  </div>
</div>
</div>

Results with this code:

Answer 1

I'm not a fan of clipping and using svg on elements (except for icons and illustrations...). and the shape you're looking for is not so complex that CSS can handle it.

The overall shape looks like a grid or a table so you can use that and play around with borders

Here is an example.

table.shape {
    position: relative;
    border-spacing: 0px;
    --border-width: 0.2rem;
    --border-radius: 0.25rem;
    --border: var(--border-width) solid black;
}

table.shape td {
  box-sizing: border-box;
  border: var(--border);
  border-radius: var(--border-radius);
  background: #ff0000;
}

table.shape tr:first-child > td:first-child {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
  border-bottom: 0;
}

table.shape tr:first-child > td:last-child {
  position: relative;
  top: var(--border-width);
  right: var(--border-width);
  
  border: none;
  background: none;
  
  border-bottom-right-radius: 0px;
  border-bottom: var(--border);
}

table.shape tr:last-child > td {
  border-top-left-radius: 0;
  border-top: 0;
}

  <div class="shape-wrapper">
    <table class="shape">
      <tr>
        <td>Icon</td>
        <td><!-- leave empty --></td>
      </tr>
      <tr>
        <td colspan="2">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros
        elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero
        vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique
        posuere</td>
    </table>
  </div>

All is left to do is adjust your spacing, fonts, colors ...etc