谷歌瀏覽器開發，不保證其他瀏覽器工作正常

挖孔用的SVG

<svg style="position: absolute; width: 0; height: 0;" viewBox="0 0 12 140" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="mask">
            <path transform="translate(0, 0)" fill="white" d="m0 0c0 3.6668 3.1511 5.8909 6.0014 6.5319 3.0923 0.69549 5.9986 3.2874 5.9986 6.5264v113.88c0 3.239-2.9063 5.8309-5.9986 6.5264-2.8503 0.64105-6.0014 2.8651-6.0014 6.5319z"/>
        </mask>
    </defs>
</svg>

不用svg也行，比如 mask: radial-gradient(ellipse 10px 20px at 0% 50%, transparent 50px, black 50px);, 但此處略過，因為svg更強大

核心代碼

<div class="father">
    <div class="child" />
</div>

.father{
    background: linear-gradient(0deg, rgba(255, 0, 0, 1) -13%, rgb(3 11 243) 83% 68%);
    padding-left: 100px;
    width: 400px;
    height: 400px;
}
.child{
    width: 100%;
    height: 100%;
    mask: linear-gradient(white, white), url(#mask);
    mask-composite: subtract;
}

動態修改path位置

let mask = document.querySelector("#mask path");
let y = 100;
mask.setAttribute('transform', `translate(0, ${y})`);

解釋：
mask的核心是白色遮擋，黑色透明

• white（白色） → 完全顯示（不透明，保留元素內容）。
• black（黑色） → 完全隱藏（透明，移除元素內容）。
• transparent（透明） → 等同於 black，也是完全隱藏。
  mask-composite: subtract;會讓後面的遮罩區域從前面的遮罩區域中減去，最終顯示的是前遮罩減去後遮罩剩餘的部分，比如mask: linear-gradient(white, white), url(#mask); 就是linear-gradient - url(#mask), 結果就是#mask的部分變透明瞭，做為mask，就是#mask的部分能看到後面的元素。

注意：path一定要設置fill="white", 原因如下：

• 如果 #mask 是白色（white）：

  • 白色在遮罩中代表 “完全顯示”。
  • 但 subtract 會 從第一個遮罩中減去這個區域，所以：
  • #mask 白色部分 → 被減去 → 變成透明（不可見）。
  • 其他部分（未被 #mask 覆蓋的區域）→ 仍然是白色（完全顯示）。

• 如果 #mask 是黑色（black）：

  • 黑色在遮罩中代表 “完全隱藏”。
  • subtract 不會減去黑色部分（因為黑色已經是“無”）。
  • 最終遮罩仍然是 linear-gradient(white, white)（完全顯示）。

• 如果 #mask 是灰色或漸變：

  • 灰色代表部分透明，subtract 會按比例減去。

對了，那個箭頭一定要寫在child外面

完。

在線預覽：Mask挖洞