Html 如何用css在右侧创建多个半圆

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

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

.ticket {
  display: inline-block;
  width: 500px;
  height: 200px;
  overflow: hidden;
  background: orange;
  /* 20px is the radius, it needs to be smaller than 50px/2 */
  --mask: radial-gradient(20px at right,#0000 97%,#000) 50%/100% 50px;
  -webkit-mask: var(--mask);
          mask: var(--mask);
}

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

Html相关问答推荐

springBoot + Thymeleaf：属性中的UTF-8

从网络抓取中提取文本

如何格式化HTML文本，使其环绕关键字

当溢出到滚动条中时， bootstrap 按钮样式会更改

穿过整个屏幕的旋转线

如何用css在右侧创建多个半圆

是否有语义 HTML 可以澄清含义？

如何为卡片块制作侧丝带样式

如何为Vuetify输入控件减小标签和字段之间的间距？

如何使用CSS将页面标题水平居中对齐

如何使文本区域自动扩展到最大高度？

CSS 随着内容宽度的增加而减少填充

为什么 css position：fixed 不适用于对话框标签？

为什么在使用src与srcdoc时 iframe 内容高度呈现不同？

如何在 blazor 中单击单个按钮调用 2 个等待任务

Tailwind CSS 复选框样式不起作用

Css 左属性问题

如何在不删除

标记的情况下加入 HTML 中的段落

左右图像，响应页面大小并居中

如何计算没有根元素的先前 html 标记(lxml python3)编辑：还获取元素