<div class="block">
  <svg class="block__svg">
    <defs>
      <linearGradient id="gradient-border-mask" x1="0%" y1="0%" x2="50%" y2="50%">
        <stop offset="0%" stop-color="#555" />
        <stop offset="100%" stop-color="#000" />
      </linearGradient>
      
      <mask id="mask-border">
        <rect width="100%" height="100%" fill="url(#gradient-border-mask)" />
      </mask>
      
      <!-- https://codepen.io/RAX7/pen/OJXRYjZ -->
      <filter id="inset-stroke-color">
        <feComposite in="SourceGraphic" in2="SourceAlpha" operator="in" result="borderShape" />
        <feMorphology in="borderShape" operator="erode" radius="1" result="borderShapeOut" />
        <feComposite in="borderShape" in2="borderShapeOut" operator="out" result="borderStroke" />
      </filter>

      <clipPath id="clip">
        <path class="clip-shape-top" d="M37,16V15h-.4171a10.29,10.29,0,0,1-7.6487-3.4065L22.5877,3.3254a5.1531,5.1531,0,0,0-8.1754,0L8.0658,11.5935A10.29,10.29,0,0,1,.4171,15H0v1Z" transform="translate(-1000 0)"/>
        <rect class="clip-shape-rect" y="15" width="100%" height="200%" rx="30" />
      </clipPath>
    </defs>
    
     <!-- border -->
    <g mask="url(#mask-border)">
      <g filter="url(#inset-stroke-color)">
        <rect width="100%" height="100%" clip-path="url(#clip)" fill="#fff" />
      </g>
    </g>
  </svg>

  
  <div class="block__content">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus dicta, libero harum inventore ratione optio facilis sint, quos provident praesentium iste rerum laborum nemo, debitis odio. Impedit reiciendis sunt in neque! Repellat blanditiis quaerat consectetur debitis officia nulla, aliquam illum. Amet facilis beatae eum in explicabo ad cumque accusamus laudantium assumenda magnam pariatur accusantium quaerat eligendi, laboriosam perspiciatis necessitatibus possimus quisquam adipisci quas sunt? Laborum tempora repellat recusandae unde voluptate. Enim, aperiam praesentium dolorum odit amet aliquid delectus sequi nam quia eum reiciendis vitae vel aspernatur, magnam recusandae nulla quam? Eius iure eum eos adipisci obcaecati molestiae quos nisi rerum!
  </div>
</div>

* {
  box-sizing: border-box;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  min-height: 100vh;
  background:
    url(https://images.unsplash.com/photo-1526336024174-e58f5cdd8e13?crop=entropy&cs=tinysrgb&fm=jpg&ixlib=rb-1.2.1&q=80&raw_url=true&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1200) no-repeat center / cover,
    radial-gradient(circle at 20% 50%, #28314d, #0c1733) no-repeat;
  background-blend-mode: overlay;
  line-height: 1.5;
  font-family: sans-serif;
}

.block {
  position: relative;
  width: 75%;
  color: #fff9;
  z-index: 0;
}

.block::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #1e274599;
  clip-path: url(#clip);
  backdrop-filter: blur(6px);
  z-index: -1;
}

.block__svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.block__content {
  padding: 50px 25px 25px;
}

const block = document.querySelector('.block');
const clipTop = block.querySelector('.clip-shape-top');
const clipRect = block.querySelector('.clip-shape-rect');

const shapeWidth = 37;
const shapeHeight = 15;

const resizeObserver = new ResizeObserver((entries) => {
  for (const entry of entries) {
    const el = entry.target;
    const rect = entry.contentRect;
    if (el === block) {
      clipTop.setAttribute('transform', `translate(${(rect.width - shapeWidth) / 2} 0)`);
      clipRect.setAttribute('y', `${shapeHeight}`);
      clipRect.setAttribute('height', `${rect.height - shapeHeight}`);
    }
  }
});

resizeObserver.observe(block, { box: "border-box" });