如何用CSS在元素右侧创建多个半圆形？

你当前的mask设置是将径向渐变定位在元素左侧，且未设置垂直重复，所以只生成了单个缺口，位置也不符合预期。以下是修正后的实现方案：

修改后的代码 #

.ticket {
  display: inline-block;
  width: 500px;
  height: 200px;
  background: orange;
  -webkit-mask: var(--mask);
  mask: var(--mask);
  --mask: radial-gradient(16px at right 16px 50%, #0000 100%, #000) right / 100% 50px repeat-y;
}

<div class="ticket"></div>

关键调整说明 #

• 调整径向渐变锚点：at right 16px 50%，把透明半圆的中心定位在元素右侧向内16px的垂直中点，确保缺口出现在右侧边缘
• 添加repeat-y：让mask图案在垂直方向重复，自动生成多个均匀分布的半圆形缺口
• 调整高度尺寸：50px控制每个缺口的垂直间距，可根据需求修改这个值来调整缺口的密度

内容的提问来源于stack exchange，提问作者Septian Dika