JSFiddle - React, Tailwind, and code Playground

HTML

<div class="box">
   <div class="text"></div>
   <svg width=100% height=100% class="rect-svg">
     <defs>
       <mask id="mask">
         <rect x=0 y=0 width=100% height=100% fill=#fff />
         <rect x=150 y=100 rx=10 ry=10 width=300 height=200 />
         <polygon points="370 300,385 315,400 300" />
       </mask>
     </defs>
     <rect x="0" y="0" width="100%" height="100%" style="stroke: none; fill:rgba(0,0,0,.5); mask: url(#mask)"></rect>
   </svg>
</div>

CSS

:root {
  --x: 150px;
  --y: 100px;
  --w: 300px;
  --h: 200px;
  --r: 10px;
}

.box {
  position: relative;
  width: 600px;
  height: 400px;
  margin-bottom: 10px;
  overflow: hidden;
  background: #fff;
}

.rect-svg {
  position: absolute;
  top: 0; left: 0;
}

JavaScript

const textElem = document.querySelectorAll('.text')

textElem.forEach(item => {
  item.textContent = '测试文字'.repeat(176)
})